Javascript 如何使用highcharts绘制堆叠柱形图？

[[“isis”，14823424101]，“isis”，75898881011]，“isis_uv”，4587521115]，“bgp”，5240668161059]，“bgp_政策注册代理”，352256146]，“isis”，76554241013]，“isis_政策注册代理”，290816314]]

Here [0] index is the x-axis  
     [1] index is the y-axix  
     [2] index is the legend value

我想画一张这样的图

---

请指导我绘制它。

为了从图像中绘制图表，您需要稍微改变数据的格式

首先，需要将x轴的项目定义为类别数组：

xAxis: {
    categories: ['isis', 'isis_uv', 'bgp', 'bgp_policy_reg_agent', 'isis_policy_reg_agent']
},

接下来，定义图表系列和数据。图例中所需的每个项目（1011011、1012等）将是一个单独的系列，具有自己的名称和数据。每个序列的y轴值都是与我们上面定义的类别数组相匹配的数据数组

series: [{
    name: '1012',
    data: [14823424, 0, 0, 0, 0]
}, {
    name: '1011',
    data: [7589888, 0, 0, 0, 0]
}, {
    name: '1115',
    data: [0, 458752, 0, 0, 0]
}, {
    name: '1059',
    data: [0, 0, 524066816, 0, 0]
}, {
    name: '146',
    data: [0, 0, 0, 352256, 0]
}, {
    name: '1013',
    data: [7655424, 0, 0, 0, 0]
}, {
    name: '314',
    data: [0, 0, 0, 0, 290816]
}]

让我们看一下这里的第一个系列：

{
    name: '1012',
    data: [14823424, 0, 0, 0, 0]
}

这说明系列“1012”有：

• x轴项目“isis”的值为14823424
• x轴项目“isis_uv”的值为0
• x轴项目“bgp”的值为0
• x轴项目“bgp\u策略\u注册表\u代理”的值为0
• x轴项目“isis\u策略\u reg\u代理”的值为0

下面是一个修改后的示例，其中包含您的数据：

我希望这对你有帮助

---

为了从图像中绘制图表，您需要稍微改变数据的格式

首先，需要将x轴的项目定义为类别数组：

xAxis: {
    categories: ['isis', 'isis_uv', 'bgp', 'bgp_policy_reg_agent', 'isis_policy_reg_agent']
},

接下来，定义图表系列和数据。图例中所需的每个项目（1011011、1012等）将是一个单独的系列，具有自己的名称和数据。每个序列的y轴值都是与我们上面定义的类别数组相匹配的数据数组

series: [{
    name: '1012',
    data: [14823424, 0, 0, 0, 0]
}, {
    name: '1011',
    data: [7589888, 0, 0, 0, 0]
}, {
    name: '1115',
    data: [0, 458752, 0, 0, 0]
}, {
    name: '1059',
    data: [0, 0, 524066816, 0, 0]
}, {
    name: '146',
    data: [0, 0, 0, 352256, 0]
}, {
    name: '1013',
    data: [7655424, 0, 0, 0, 0]
}, {
    name: '314',
    data: [0, 0, 0, 0, 290816]
}]

让我们看一下这里的第一个系列：

{
    name: '1012',
    data: [14823424, 0, 0, 0, 0]
}

这说明系列“1012”有：

• x轴项目“isis”的值为14823424
• x轴项目“isis_uv”的值为0
• x轴项目“bgp”的值为0
• x轴项目“bgp\u策略\u注册表\u代理”的值为0
• x轴项目“isis\u策略\u reg\u代理”的值为0

下面是一个修改后的示例，其中包含您的数据：

我希望这对你有帮助

---

迈克·扎瓦雷洛已经详细描述了您的问题

如果您不能（或不想）格式化数据，下面的函数将为您执行此操作

chart: {
    type: 'column',
    events: {
      load: function() {
        var chart = this,
          categories = [],
          series = [];
        data.forEach(function(elem) {
          if (!categories.includes(elem[0])) {
            categories.push(elem[0])
          }
        })
        data.forEach(function(elemData) {
          series.push({
            name: elemData[2],
            data: (function() {
              var dataPoints = [];
              categories.forEach(function() {
                dataPoints.push(0)
              })
              categories.forEach(function(elemCategories, j) {
                if (elemCategories == elemData[0]) {
                  dataPoints[j] = elemData[1]
                }
              })
              return dataPoints
            })()
          })
        })
        chart.update({
          series: series,
          xAxis: {
            categories: categories
          }
        }, true, true)
      }
    }
  },

---

您可以在这里查看示例：

Mike Zavarello已经详细描述了您的问题

如果您不能（或不想）格式化数据，下面的函数将为您执行此操作

chart: {
    type: 'column',
    events: {
      load: function() {
        var chart = this,
          categories = [],
          series = [];
        data.forEach(function(elem) {
          if (!categories.includes(elem[0])) {
            categories.push(elem[0])
          }
        })
        data.forEach(function(elemData) {
          series.push({
            name: elemData[2],
            data: (function() {
              var dataPoints = [];
              categories.forEach(function() {
                dataPoints.push(0)
              })
              categories.forEach(function(elemCategories, j) {
                if (elemCategories == elemData[0]) {
                  dataPoints[j] = elemData[1]
                }
              })
              return dataPoints
            })()
          })
        })
        chart.update({
          series: series,
          xAxis: {
            categories: categories
          }
        }, true, true)
      }
    }
  },

您可以在此处查看示例：