如何将数据 json 显示到 2 个不同的高图栏

Question

我正在尝试在柱高图中显示数据。柱高车应该只有 2 个柱并且两个柱都有数据..

这里是解释...

我有 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 想要的相同

Answer 1

您需要使用 stack 属性并创建两个堆栈。示例：

var series = [{
        stack: 'A',
        ...
    },
    {
        stack: 'B',
        ...
    }
];

现场演示： http://jsfiddle.net/BlackLabel/0fbrac5g/

API参考：https://api.highcharts.com/highcharts/series.column.stack

如何将数据 json 显示到 2 个不同的高图栏

how to show data json to 2 different highchart bar

javascript

jquery

label

json

highcharts