Highcharts, график с двумя сериями, начинающимися в разных точках, как вы показываете один столбец?

Question

Я пытаюсь сделать диаграмму, которая показывает два разных набора данных. Оба распространяются в течение 12 месяцев, но один набор данных относится только к текущему месяцу.

У меня есть что-то вроде этого примера (JSFiddle)

Highcharts.chart('container', {
chart: {
    type: 'column'
},
title: {
    text: 'Monthly Average Temperature'
},
subtitle: {
    text: 'Source: WorldClimate.com'
},
xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
    title: {
        text: 'Temperature (°C)'
    }
},
plotOptions: {
    column: {
        dataLabels: {
            enabled: true
        },
        enableMouseTracking: false
    }
},
series: [{
    name: 'Tokyo',
    data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
    name: 'London',
    data: [4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8],
    pointStart: 1
}]

});

Моя проблема в том, что я хотел бы показать данные до начала вторых данных одним столбцом.

Например, в JSFiddle, связанном выше, я хотел бы видеть январь как более широкий столбец вместо тонкого с пустым пробелом справа. Это возможно?

Спасибо за чтение.

Answer 1

Например, в JSFiddle, указанном выше, я хотел бы видеть январь как более широкий столбец вместо тонкого с пустым пространством справа. Это возможно?

Возможно, однако для этого потребуется немного специального кода. Лучшее решение - центрировать одну колонку.

Код:

var maxGroupedColumns = 0;

Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      load: function() {
        var newSeriesArr = [],
          chart = this,
          groupedSeries = {},
          pointOffset;


        // create a new series for each point
        for (var i = chart.series.length - 1; i >= 0; i--) {
          var series = chart.series[i];

          var pointsInSeries = series.points.length;
          for (var j = pointsInSeries - 1; j >= 0; j--) {
            var point = series.points[j];

            // omit the point if its y value equals to 0 
            if (!point.y) {
              continue;
            }

            // make sure that x property of each point is initialized
            point.options.x = point.x;

            var newSeriesOptions = {
              data: [point.options],
              // move relevant options from the original series
              color: series.color,
              name: series.name,
              // linking series items in legend
              linkedTo: series.options.id
            };

            if (!groupedSeries[point.x]) {
              // create group
              groupedSeries[point.x] = [];
            }

            // create series and assign it to group
            groupedSeries[point.x].push(chart.addSeries(newSeriesOptions, false));

            if (groupedSeries[point.x].length > maxGroupedColumns) {
              // update max grouped columns number
              maxGroupedColumns = groupedSeries[point.x].length;
            }

            point.remove(false);
          }

          //series.remove(false);
          series.setData([]);
        }

        // handle pointPlacement for each series
        pointOffset = 1 / maxGroupedColumns;
        for (var x in groupedSeries) {
          var group = groupedSeries[x];

          group.forEach(function(series, index) {
            series.update({
              pointPlacement: pointOffset * index - ((group.length - 1) * pointOffset) / 2,
            }, false);
          });
        }

        chart.redraw();
      }
    }
  },
  title: {
    text: 'Monthly Average Temperature'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  yAxis: {
    title: {
      text: 'Temperature (°C)'
    }
  },
  plotOptions: {
    column: {
      dataLabels: {
        enabled: true
      },
      grouping: false,
      pointRange: 1,
      pointPadding: 0.25,
    }
  },
  series: [{
    name: 'Tokyo',
    id: 'Tokyo',
    data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
  }, {
    name: 'London',
    id: 'London',
    data: [null, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
  }]
});

Демо-версия: https://jsfiddle.net/wchmiel/1wph8ojx/3/