Столбчатая диаграмма Highcharts для нескольких баров

Question

У меня есть требование, где мне нужно отображать гистограммы, показывающие ход выпуска.Где мне нужно показывать общее вместе с каждым дочерним выпуском под ним.

Мой J-ось X выглядит так: https://jsonblob.com/b9dff016-2f79-11e9-9080-15acf9a0cdee

Мой J-ось Y выглядит следующим образом: https://jsonblob.com/87f94869-2f79-11e9-9080-bd5614234be8

Когда я пытаюсь построить только один бар, это работает нормально.Но когда я отправляю данные для двух баров, как указано в json выше, отображается «Нет данных для отображения»

Highchart:

Highcharts.chart('chartDiv_'+widgetId, {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Project Progress'
    },
    xAxis: {
        categories: x_axis
    },
    yAxis: {
        min: 0,
        max: 100,
        reversedStacks : false,
        labels: {
            formatter: function() {
                return this.value+"%";
            }
        },
        title: {
            text: 'Percentage'
        }
    },
    credits: {
        enabled: false
    },
    tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y} %</b><br/>',
        shared: false
    },
    legend: {
        enabled: false,
        reversed: false
    },
    plotOptions: {
        series: {
            stacking: 'percentage',
            pointWidth: 60,
            dataLabels: {
                enabled: true,
                format : '{series.name}',
                style : {
                    color: '#DCDCDC',
                    fontSize: '13px',
                    fontWeight: 'pointer',
                    textOutline: '0px contrast',
                    textShadow: 'none'
                }
            }
        }
    },
    series: y_axis
});

Answer 1

Ваш y_axis (или серия) настроен неправильно.

У вас есть эта настройка:

series: [
  [
    {datapoint 1 bar 1},
    {datapoint 2 bar 1},
    ...
  ], 
  [
    {datapoint 1 bar 2},
    {datapoint 2 bar 2},
    ...
  ]
]

Высокие диаграммы принимают определения серий только следующим образом:

series: [
  {datapoint 1 bar 1},
  {datapoint 2 bar 1},
  ...,
  {datapoint 1 bar 2},
  {datapoint 2 bar 2},
  ...
]

В качестве альтернативы вы можете сделать:

series: [
  {datapoint 1-N bar 1},
  {datapoint 1-N bar 2},
  ...
]

То, что вы, вероятно, хотите сделать, это:

series: [
  {
    name: "1-PI-1",
    data: [{x: 0, y: 20.25}] //x: 0 = first category
  }, {
    name: "1-PI-2",
    data: [{x: 0, y: 30.38}]
  }, 
  ..., 
  {
    name: "1-PI-1",
    data: [{x: 1, y: 36.59}]  //x: 1 = second category
  },
  ...
]

Здесь, x: 0 относится кпервая категория, а x: 1 относится ко второй категории.

var y_axis = 
  [{
    "name": "1-PI-1",
    "data": [{x: 0, y: 20.25}],
    "color": "#136e2a",
    "index": 0
  }, {
    "name": "1-PI-2",
    "data": [{x: 0, y: 30.38}],
    "color": "#3399ff",
    "index": 1
  }, {
    "name": "1-Alpha",
    "data": [{x: 0, y: 46.84}],
    "color": "#9933ff",
    "index": 2
  }, {
    "name": " ",
    "data": [{x: 0, y: 0.0}],
    "color": "#4d4d4d",
    "index": 3
  }, {
    "name": " ",
    "data": [{x: 0, y: 0.0}],
    "color": "#4d4d4d",
    "index": 4
  }, {
    "name": " ",
    "data": [{x: 0, y: 2.53}],
    "color": "#4d4d4d",
    "index": 5
  },
  {
    "name": "1-PI-1",
    "data": [{x: 1, y: 36.59}],
    "color": "#136e2a",
    "index": 0
  }, {
    "name": "1-PI-2",
    "data": [{x: 1, y: 34.15}],
    "color": "#3399ff",
    "index": 1
  }, {
    "name": " ",
    "data": [{x: 1, y: 2.44}],
    "color": "#4d4d4d",
    "index": 2
  }, {
    "name": " ",
    "data": [{x: 1, y: 26.83}],
    "color": "#4d4d4d",
    "index": 3
  }, {
    "name": " ",
    "data": [{x: 1, y: 0.0}],
    "color": "#4d4d4d",
    "index": 4
  }, {
    "name": " ",
    "data": [{x: 1, y: 0.0}],
    "color": "#4d4d4d",
    "index": 5
  }]

var x_axis = ["Project 1", "Project 2"]

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Project Progress'
  },
  xAxis: {
    categories: x_axis
  },
  yAxis: {
    min: 0,
    max: 100,
    reversedStacks: false,
    labels: {
      formatter: function() {
        return this.value + "%";
      }
    },
    title: {
      text: 'Percentage'
    }
  },
  credits: {
    enabled: false
  },
  tooltip: {
    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y} %</b><br/>',
    shared: false
  },
  legend: {
    enabled: false,
    reversed: false
  },
  plotOptions: {
    series: {
      stacking: 'percentage',
      pointWidth: 60,
      dataLabels: {
        enabled: true,
        format: '{series.name}',
        style: {
          color: '#DCDCDC',
          fontSize: '13px',
          fontWeight: 'pointer',
          textOutline: '0px contrast',
          textShadow: 'none'
        }
      }
    }
  },
  series: y_axis
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

Рабочая JSFiddle: https://jsfiddle.net/ewolden/rzwkeysm/15/

API на bar.data: https://api.highcharts.com/highcharts/series.bar.data