如何将数据 json 显示到 2 个不同的高图栏
Posted
技术标签:
【中文标题】如何将数据 json 显示到 2 个不同的高图栏【英文标题】：how to show data json to 2 different highchart bar 【发布时间】：2021-11-05 23:13:34 【问题描述】：我试图在 bar highcharts 中显示数据.. bar highcart 应该只有 2 bar 并且两个 bar 都有数据..
所以这里是解释...
我有 2 个类别条形图，两个类别都有一个子类别。
这里要明确的是类别的数据：
第一类：
scategori 1-1, scategori 2-1,scategori3-1
这是第二类：
scategori 1-2,scategori 2-2,scategori 3-2,scategori 4-2,scategori 5-2,scategori 6-2
这是我想要实现的示例：
这两个数据都来自这个 json 数据：
[
"name": "scategories 1-1",
"color": "#1E4585",
"data": [
"y": 40,
"total": 40,
"data": "1",
"name": "National",
"drilldown": "3",
"next": "level2"
]
,
"name": "scategories 2-1",
"color": "#600AB5",
"data": [
"y": 40,
"total": 40,
"data": "2",
"name": "National",
"drilldown": "3",
"next": "level2"
]
,
"name": "scategories 3-1",
"color": "#0DB9D0",
"data": [
"y": 20,
"total": 20,
"data": "3",
"name": "National",
"drilldown": "3",
"next": "level2"
]
,
"name": "scategories 1-2",
"color": "#0DB9D0",
"data": [
"y": 20,
"total": 20,
"data": "3",
"name": "National",
"drilldown": "3",
"next": "level2"
]
,
"name": "scategories 2-2",
"color": "#0DB9D0",
"data": [
"y": 20,
"total": 20,
"data": "3",
"name": "National",
"drilldown": "3",
"next": "level2"
]
,
"name": "scategories 3-2",
"color": "#0DB9D0",
"data": [
"y": 20,
"total": 20,
"data": "3",
"name": "National",
"drilldown": "3",
"next": "level2"
]
,
"name": "scategories 4-2",
"color": "#0DB9D0",
"data": [
"y": 20,
"total": 20,
"data": "3",
"name": "National",
"drilldown": "3",
"next": "level2"
]
,
"name": "scategories 5-2",
"color": "#0DB9D0",
"data": [
"y": 20,
"total": 20,
"data": "3",
"name": "National",
"drilldown": "3",
"next": "level2"
]
,
"name": "scategories 6-2",
"color": "#0DB9D0",
"data": [
"y": 20,
"total": 20,
"data": "3",
"name": "National",
"drilldown": "3",
"next": "level2"
]
,]
当我尝试将上面的数据 json 转换为 highchart 的脚本时。结果和我想要的不一样。。
这是我尝试的结果：
有人可以帮助我实现我想要实现的目标或使结果与 Ico 想要的相同
【问题讨论】：
嗨@riyan193，你到底想实现什么？堆叠系列是否应该由一列和图例表示？你能在 jsfiddle 中重现你当前的阶段吗？您可以从：jsfiddle.net/BlackLabel/6m4e8x0y 嗨 ppotaczek 谢谢你的回答，我为你修改了 jsfiddle.net/p0vnxsfe 的例子，你能给我提供图像图表的最佳实践吗？谢谢你 感谢您的示例！但是，我仍然不太确定您想要实现什么。您能否更详细地描述想要的结果？ 嗨@ppotaczek 对不起，我的例子不清楚，我想在第一个问题中制作图表第二张图片我有 1 个标签是国家的，有 2 个柱形图堆叠和超过 1 个图例，示例标签国家有第一个柱形图类别 1-1 到类别 3-1 和第二个柱形图类别 1-2 到类别 6-2，你能建议示例代码 js 和 json 吗？我希望它清楚 嗨，我编辑了我有问题的成就 【参考方案1】：您需要使用stack 属性并创建两个堆栈。示例：
var series = [
stack: 'A',
...
,
stack: 'B',
...
];
现场演示： http://jsfiddle.net/BlackLabel/0fbrac5g/
API 参考： https://api.highcharts.com/highcharts/series.column.stack
【讨论】：
以上是关于如何将数据 json 显示到 2 个不同的高图栏的主要内容，如果未能解决你的问题，请参考以下文章