翻譯|使用教程|編輯:吳園園|2019-10-24 14:52:20.000|閱讀 258 次
概述:本文將為您介紹Highcharts中使用JavaScript對(duì)象結(jié)構(gòu)定義圖表的選項(xiàng)或設(shè)置。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
Highcharts是一款純JavaScript編寫的圖表庫,為你的Web網(wǎng)站、Web應(yīng)用程序提供直觀、交互式圖表。當(dāng)前支持折線、曲線、區(qū)域、區(qū)域曲線圖、柱形圖、條形圖、餅圖、散點(diǎn)圖、角度測(cè)量圖、區(qū)域排列圖、區(qū)域曲線排列圖、柱形排列圖、極坐標(biāo)圖等幾十種圖表類型。
Highcharts現(xiàn)已更新至最新版本7.2.0,新版本添加了新的頂級(jí)選項(xiàng)-說明;幾乎所有系列都增加了對(duì)多個(gè)色軸的支持;增加了高對(duì)比度光和高對(duì)比度 - 黑暗主題,與背景形成3:1對(duì)比度,并修復(fù)了一些之前存在的BUG,趕快下載試用吧~
重要推薦:
如何設(shè)置選項(xiàng)
高圖表使用JavaScript對(duì)象結(jié)構(gòu)定義圖表的選項(xiàng)或設(shè)置。本文介紹了options對(duì)象如何工作以及如何使用它。
選項(xiàng)對(duì)象
全局選項(xiàng)
使用圖表的構(gòu)造函數(shù)Highcharts.Chart初始化圖表時(shí),options對(duì)象是您傳遞的第一個(gè)參數(shù)。
在下面的示例中,標(biāo)記為紅色的代碼表示options對(duì)象:
$(function() { var chart1 = Highcharts.chart({ chart: { renderTo: 'container', type: 'bar' }, title: { text: 'Fruit Consumption' }, xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] }, yAxis: { title: { text: 'Fruit eaten' } }, series: [{ name: 'Jane', data: [1, 0, 4] }, { name: 'John', data: [5, 7, 3] }[ }); });
為了充分利用Highcharts,了解選項(xiàng)對(duì)象的工作方式以及如何以編程方式對(duì)其進(jìn)行更改非常重要。這些是關(guān)于JavaScript對(duì)象的一些關(guān)鍵概念:
示例中的Highcharts選項(xiàng)定義為對(duì)象文字。通過以這種方式指出配置,我們可以擁有一個(gè)干凈,易于閱讀且占用空間少的配置對(duì)象。具有C類型語言背景的開發(fā)人員可能更熟悉以下復(fù)雜的代碼:
// Bad code: var options = new Object(); options.chart = new Object(); options.chart.renderTo = 'container'; options.chart.type = 'bar'; options.series = new Array(); options.series[0] = new Object(); options.series[0].name = 'Jane'; options.series[0].data = new Array(1, 0, 4);
作為JavaScript對(duì)象文字,我們將像下面這樣編寫。請(qǐng)注意,這兩個(gè)選項(xiàng)對(duì)象將產(chǎn)生完全相同的結(jié)果。
// Good code: var options = { chart: { renderTo: 'container', type: 'bar' }, series: [{ name: 'Jane', data: [1, 0, 4] }] };
在上面的示例中,options對(duì)象是自己創(chuàng)建的,可以通過將其傳遞給圖表構(gòu)造函數(shù)來添加到圖表中:
$(document).ready(function() { var chart = new Highcharts.Chart(options); });
使用對(duì)象文字符號(hào)創(chuàng)建對(duì)象后,我們可以通過點(diǎn)符號(hào)擴(kuò)展其成員。假設(shè)我們有一個(gè)類似于上面“良好代碼”中定義的對(duì)象。下面的代碼向它添加了另一個(gè)系列。記住options.series是一個(gè)數(shù)組,所以它具有push方法。
options.series.push({ name: 'John', data: [3, 4, 2] })
處理JavaScript對(duì)象時(shí)可以派上用場(chǎng)的另一個(gè)事實(shí)是,點(diǎn)符號(hào)和方括號(hào)符號(hào)是等效的,因此您可以按成員的字符串名稱訪問所有成員。實(shí)際上,這options.renderTo始終與以下內(nèi)容相同:options['renderTo']
全局選項(xiàng)
如果要對(duì)同一頁面上的所有圖表應(yīng)用一組選項(xiàng),請(qǐng)使用Highcharts.setOptions,如下所示。
$(function() { Highcharts.setOptions({ chart: { backgroundColor: { linearGradient: [0, 0, 500, 500], stops: [ [0, 'rgb(255, 255, 255)'], [1, 'rgb(240, 240, 255)'] ] }, borderWidth: 2, plotBackgroundColor: 'rgba(255, 255, 255, .9)', plotShadow: true, plotBorderWidth: 1 } }); var chart1 = new Highcharts.Chart({ chart: { renderTo: 'container', }, xAxis: { type: 'datetime' }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], pointStart: Date.UTC(2010, 0, 1), pointInterval: 3600 * 1000 // one hour }] }); var chart2 = new Highcharts.Chart({ chart: { renderTo: 'container2', type: 'column' }, xAxis: { type: 'datetime' }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], pointStart: Date.UTC(2010, 0, 1), pointInterval: 3600 * 1000 // one hour }] }); });
注意:Highcharts下載隨附的主題使用此功能。
=====================================================
想要購買Highcharts正版授權(quán)的朋友可以。
更多精彩內(nèi)容,敬請(qǐng)關(guān)注下方的微信公眾號(hào),及時(shí)獲取產(chǎn)品最新資訊▼▼▼
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自: