Charts 具有向下钻取功能的双柱海图
我正在使用Highcharts生成两列条形图。表示每天我显示的下载数量和注册数量。现在我需要一个向下搜索,它显示每小时的数据。Highcharts文档通过指定y值来显示Single列的示例。但是,当我展示stached bar时,我有两个y值用于同一日期。我使用的代码如下:Charts 具有向下钻取功能的双柱海图,charts,highcharts,drilldown,Charts,Highcharts,Drilldown,我正在使用Highcharts生成两列条形图。表示每天我显示的下载数量和注册数量。现在我需要一个向下搜索,它显示每小时的数据。Highcharts文档通过指定y值来显示Single列的示例。但是,当我展示stached bar时,我有两个y值用于同一日期。我使用的代码如下: series: [{ name : 'Signups, color : '#0066FF', data : <?=$series_1?>, //data in JSON format fro
series: [{
name : 'Signups,
color : '#0066FF',
data : <?=$series_1?>, //data in JSON format from PHP
drilldown: true
}, {
name : 'Downloads',
color : '#E81531',
data : <?=$series_2?>, //data in JSON format from PHP
drilldown: true
}],
系列:[{
姓名:'注册,
颜色:“#0066FF”,
数据:,//来自PHP的JSON格式的数据
深入调查:正确
}, {
名称:'下载',
颜色:'#E81531',
数据:,//来自PHP的JSON格式的数据
深入调查:正确
}],
使用两个系列向下展开的示例,带有堆叠:“正常”
:
添加到Pawel响应- 仅使用此值替换plotOptions中的 专栏:{ 点填充:0.2, 边框宽度:0 }
,谢谢@Pawel。但是有没有可能我可以把它显示为两个横杆,而不是把一个横杆放在另一个横杆上?您需要禁用堆叠,自己计算值,然后将该值用于序列。
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}, {
name: 'Things2',
colorByPoint: true,
data: [{
name: 'Animals2',
y: 5,
drilldown: 'animals2'
}, {
name: 'Fruits2',
y: 2,
drilldown: 'fruits2'
}, {
name: 'Cars2',
y: 4,
drilldown: 'cars2'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
},{
id: 'animals2',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits2',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars2',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
})