html 制作条形图,Highcharts 基本条形图
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 基本条形图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何用计算机输入数学公式,使用Win7输
- 下一篇： 商丘学院计算机专业分数线,商丘学院录取分