英文:
highcharts help - stuck with chart
问题
我正在尝试创建以下图表 https://postimg.cc/n981pM1y，使用Highcharts。我已经完成了这个示例 https://jsfiddle.net/w9vncpk0/17/，但是我无法使每个系列在同一行上分组。我开始思考也许不可能以这种方式实现，但我想听听其他人的意见。 c
英文:
I'm trying to do the following chart https://postimg.cc/n981pM1y with Highcharts. I have done this example https://jsfiddle.net/w9vncpk0/17/ but I can't get each series to be grouped on the same line. I started thinking that it is not possible to do it this way but I would like another opinion c
答案1
得分: 0
这个图表可以很容易地使用Highcharts创建。您只需要使用 stacking 逻辑。
例如：
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Apagado',
id: 'Apagado',
color: 'red',
stack: 'LTP 3569',
data: [
[0, 2],
[1, 2]
]
},
{
name: 'Moderando',
id: 'Moderando',
color: 'yellow',
stack: 'LTP 3569',
data: [
[0, 2],
[1, 3]
]
},
{
name: 'Conduciendo',
id: 'Conduciendo',
color: 'green',
stack: 'LTP 3569',
data: [
[0, 23],
[1, 20]
]
}, {
name: 'Apagado',
color: 'red',
linkedTo: 'Apagado',
stack: 'LTP 3570',
data: [
[0, 4],
[1, 5]
]
},
{
name: 'Moderando',
color: 'yellow',
linkedTo: 'Moderando',
stack: 'LTP 3570',
data: [
[0, 7],
[1, 5]
]
},
{
name: 'Conduciendo',
color: 'green',
stack: 'LTP 3570',
linkedTo: 'Conduciendo',
data: [
[0, 2],
[1, 1]
]
}
}]
演示: https://jsfiddle.net/BlackLabel/ht53g8d6/
文档: https://www.highcharts.com/docs/advanced-chart-features/stacking-charts
英文:
This chart can be easily created with Highcharts. You need to only use stacking logic.
For example:
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Apagado',
id: 'Apagado',
color: 'red',
stack: 'LTP 3569',
data: [
[0, 2],
[1, 2]
]
},
{
name: 'Moderando',
id: 'Moderando',
color: 'yellow',
stack: 'LTP 3569',
data: [
[0, 2],
[1, 3]
]
},
{
name: 'Conduciendo',
id: 'Conduciendo',
color: 'green',
stack: 'LTP 3569',
data: [
[0, 23],
[1, 20]
]
}, {
name: 'Apagado',
color: 'red',
linkedTo: 'Apagado',
stack: 'LTP 3570',
data: [
[0, 4],
[1, 5]
]
},
{
name: 'Moderando',
color: 'yellow',
linkedTo: 'Moderando',
stack: 'LTP 3570',
data: [
[0, 7],
[1, 5]
]
},
{
name: 'Conduciendo',
color: 'green',
stack: 'LTP 3570',
linkedTo: 'Conduciendo',
data: [
[0, 2],
[1, 1]
]
}
]
Live demo: https://jsfiddle.net/BlackLabel/ht53g8d6/
Docs: https://www.highcharts.com/docs/advanced-chart-features/stacking-charts
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论