Highcharts 基本條形圖

以下實例演示了基本條形圖。

我們在前面的章節已經了解了 Highcharts 基本配置語法。接下來讓我們來看下其他的配置。

配置

chart 配置

設置 chart 的 type 屬性 為 bar ，chart.type 描述了圖表類型。默認值為 "line"。

var chart = {

type: 'bar'

};

實例

文件名：highcharts_bar_basic.htm

Highcharts 教程 | 菜鳥教程(runoob.com)

$(document).ready(function() {

var chart = {

type: 'bar'

};

var title = {

text: 'Historic World Population by Region'

};

var subtitle = {

text: 'Source: Wikipedia.org'

};

var xAxis = {

categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],

title: {

text: null

}

};

var yAxis = {

min: 0,

title: {

text: 'Population (millions)',

align: 'high'

},

labels: {

overflow: 'justify'

}

};

var tooltip = {

valueSuffix: ' millions'

};

var plotOptions = {

bar: {

dataLabels: {

enabled: true

}

}

};

var legend = {

layout: 'vertical',

align: 'right',

verticalAlign: 'top',

x: -40,

y: 100,

floating: true,

borderWidth: 1,

backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),

shadow: true

};

var credits = {

enabled: false

};

var series= [{

name: 'Year 1800',

data: [107, 31, 635, 203, 2]

}, {

name: 'Year 1900',

data: [133, 156, 947, 408, 6]

}, {

name: 'Year 2008',

data: [973, 914, 4054, 732, 34]

}

];

var json = {};

json.chart = chart;

json.title = title;

json.subtitle = subtitle;

json.tooltip = tooltip;

json.xAxis = xAxis;

json.yAxis = yAxis;

json.series = series;

json.plotOptions = plotOptions;

json.legend = legend;

json.credits = credits;

$('#container').highcharts(json);

});

以上實例輸出結果為：

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的html 制作条形图,Highcharts 基本条形图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。