html堆叠柱状图脚本,Highcharts 堆叠组柱形图

Highcharts 堆叠组柱形图

以下实例演示了堆叠组柱形图。

我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 plotOptions 中添加 stacking 属性：

配置

plotOptions：数据点选项

plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型，其属性设置略微有些差异。

配置图表堆叠设置 plotOptions.area.stacking 为 "percent"。如果禁用堆叠使用 null。

var plotOptions = {

column: {

stacking: 'normal',

dataLabels: {

enabled: true,

color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',

style: {

textShadow: '0 0 3px black'

}

};

series 数据列项配置

配置堆叠组中每个对应的数据列项。series: [{

data: [5, 3, 4, 7, 2],

stack: 'male'

}]

实例

文件名：highcharts_column_rotated.htm

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

$(document).ready(function() {

var chart = {

type: 'column'

};

var title = {

text: 'Total fruit consumption, grouped by gender'

};

var xAxis = {

categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']

};

var yAxis ={

allowDecimals: false,

min: 0,

title: {

text: 'Number of fruits'

}

};

var plotOptions = {

column: {

stacking: 'normal'

}

};

var credits = {

enabled: false

};

var series= [{

data: [5, 3, 4, 7, 2],

stack: 'male'

}, {

data: [3, 4, 4, 2, 5],

stack: 'male'

}, {

data: [2, 5, 6, 2, 1],

stack: 'female'

}, {

data: [3, 0, 4, 4, 3],

stack: 'female'

}];

var json = {};

json.chart = chart;

json.title = title;

json.xAxis = xAxis;

json.yAxis = yAxis;

json.plotOptions = plotOptions;

json.credits = credits;

json.series = series;

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

});

以上实例输出结果为：

html堆叠柱状图脚本,Highcharts 堆叠组柱形图相关推荐

html5 堆叠柱状,Highcharts 堆叠柱形图
Highcharts 堆叠柱形图以下实例演示了堆叠柱形图. 我们在前面的章节已经了解了 Highcharts 基本配置语法.接下来让我们来看下其他的配置.在 plotOptions 中添加 stac ...
柱状图、堆叠柱状图、瀑布图有什么区别？怎样用Python绘制？（附代码）
来源:大数据DT(ID:hzdashuju) 作者:屈希峰,资深Python工程师,知乎多个专栏作者本文约8000字,建议阅读20分钟柱状图是当前应用最广泛的图表之一,你几乎每天都可以在电子产品上 ...
柱状图、堆叠柱状图、瀑布图有什么区别？怎样用Python绘制？
导读:柱状图是当前应用最广泛的图表之一,你几乎每天都可以在电子产品上看到它.它有哪些分类?可以展示哪些数据关系?怎样用Python绘制?本文带你逐一了解. 作者:屈希峰,资深Python工程师,知乎多 ...
可视化图表之奥妙——百分比堆叠柱状图
百分比堆叠柱状图是属于堆叠柱状图的一种,是指将每个柱子进行分割以显示相同类型下各个数据的占比大小情况.百分比堆叠柱形图上柱子的各个层代表的是该类别数据占该分组总体数据的百分比,但不适用于对比不同分组内 ...
R堆叠柱状图各成分连线画法：突出展示组间物种丰度变化
作者:朱微金李陈浩堆叠柱状图连线画法提出问题 18年1月29日宏基因组转载了中科院生态中心邓晔组的文章<土壤细菌定量方法结合相对丰度分析揭示种群的真实变化 >.其中的图3基于堆叠柱状 ...
echarts 堆叠柱状图3d效果_【python可视化】：pyecharts：柱形图、堆叠条形图、极坐标堆叠柱形图、极坐标堆叠分类条形图...
•本文字数:约1000字•阅读时长:约3分钟•难度:2颗星官方介绍:pyecharts 是一个用于生成 Echarts 图表的类库.Echarts 是百度开源的一个数据可视化 JS 库.用 Echa ...
可视化例子(10)——HighCharts三维堆叠柱状图
由于工作的需要接触 HighCharts 的使用.做出了个三维堆叠柱状图,得出的效果图如下图所示: 其主要代码如下: <!DOCTYPE HTML> <html><hea ...
matplotlib绘制堆叠柱状图、多个柱形图
学习期间做个笔记,如果有问题欢迎各位大佬指出~ #问题: #三天中3部电影的票房变化,movie = ['千与千寻', '玩具总动员4', '黑衣人:全球追缉'] #real_day1 = [4053 ...
相对丰度柱状图matlab,R堆叠柱状图各成分连线画法：突出展示组间物种丰度变化...
作者:朱微金李陈浩堆叠柱状图连线画法提出问题 18年1月29日宏基因组转载了中科院生态中心邓晔组的文章<土壤细菌定量方法结合相对丰度分析揭示种群的真实变化 >.其中的图3基于堆叠柱状图 ...

html堆叠柱状图脚本,Highcharts 堆叠组柱形图

html堆叠柱状图脚本,Highcharts 堆叠组柱形图相关推荐

最新文章

热门文章