Question

[[“ isis”，14823424,1012]，[“ isis”，7589888,1011]，[“ isis_uv”，458752,1115]，[“ bgp”，524066816,1059]，[ “ bgp_policy_reg_agent”，352256,146]，[“ isis”，7655424,1013]，[“ isis_policy_reg_agent”，290816,314]]

describe extended stream3

我想绘制一个像这样的图

JSFiddle Link

请指导我进行绘图。

Answer 1

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)
      }
    }
  },

您可以在此处查看示例：https://jsfiddle.net/BlackLabel/mqotyc64/

Answer 2

为了从图像中绘制图表，您将需要对数据进行一些格式化。

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

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

接下来，您定义图表系列和数据。您要在传奇中使用的每个项目（1011、1012等）将是一个单独的系列，具有自己的名称和数据。每个系列的 y轴值是与我们上面定义的categorys数组匹配的数据数组。

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_policy_reg_agent”的值为0
x轴项目“ isis_policy_reg_agent”的值为0

这是您的数据的修改示例：https://jsfiddle.net/brightmatrix/6gb0tzj3/74/

我希望这对您有帮助。

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

2 个答案: