如何在 HighCharts 中的列上开始行答案

【问题标题】：How to start lines on columns in HighCharts如何在 HighCharts 中的列上开始行
【发布时间】：2016-09-15 15:13:27
【问题描述】：

我有一个包含多组列和行的组合图表。每列对应一行。我希望每一行都从各自的列开始。这是一个例子：

现在，列数是可变的，所以我想动态计算行的pointPlacement。

最好的方法是什么？有没有办法告诉行从列开始？如果没有，我如何计算积分位置？行数和列数以及 x 轴上的组数会有所不同。

谢谢。

因为 SO 需要代码：

    {
        type: 'line',
        name: 'Jane-line',
        data: [3, 2, 1, 3, 4],
        pointPlacement: -0.2
    },
    {
        type: 'line',
        name: 'john-line',
        data: [2, 3, 5, 7, 6],
        pointPlacement: 0 
    },
    {
        type: 'line',
        name: 'joe-line',
        data: [4, 3, 3, 9, 0],
        pointPlacement: 0.2 
    }

【问题讨论】：

标签： javascript highcharts highcharts-ng

【解决方案1】：

您可以添加与您的线系列相关的新 xAxis。该系列将有更多类别，因此刻度线将比您的法线轴更粗。

您可以检查线系列是否在图表中具有相关的可见列系列，如果有，您可以将此系列添加到图表中。

在这里你可以找到我为这个案例编写的自定义函数：

var positioningLineSeries = function(chart, event) {
    if (redraw) {
      var columnSeries = [],
        each = Highcharts.each,
        numberOfColumnSeries = 0,
        categoriesFor2Axis = [],
        i;
      each(chart.series, function(s) {
        if (s.type === 'column' && s.visible) {
          columnSeries.push(s);
        }
      });
      for (i = 0; i < chart.series.length; i++) {
        if (chart.series[i].type === 'line') {
          chart.series[i].remove(false);
          i--;
        }
      }
      numberOfColumnSeries = columnSeries.length;
      redraw = false;
      each(chart.xAxis[0].categories, function(c) {
        for (i = 0; i < numberOfColumnSeries + 2; i++) {
          categoriesFor2Axis.push(c);
        }
      });
      chart.xAxis[1].update({
        categories: categoriesFor2Axis,
        min: 0,
        max: categoriesFor2Axis.length - 1
      }, false);

      var newData, newLineSeries = $.extend(true, [], lineSeries);

      each(newLineSeries, function(s) {
        newData = [];

        each(columnSeries, function(cS, i) {
          if (cS.options.ID === s.columnID) {

            each(s.data, function(p, j) {
              newData.push([p[0] + i + 1 + j * (numberOfColumnSeries + 1), p[1]]);
            });
            s.data = newData;
            chart.addSeries(s, false);
          }

        });


      });
      chart.redraw();
    } else {
      redraw = true;
    }
  };

您可以在这里找到它如何工作的示例：http://jsfiddle.net/aozdjab2/6/

【讨论】：