如何在HighCharts中的列上啓動行

我有一個組合的圖表，其中包含一組列和行。每列對應一條線。我希望每行都在各自的列上開始。下面是一個例子：現在如何在HighCharts中的列上啓動行

，列的數目是可變的，所以要計算pointPlacement爲線動態。

這樣做的最好方法是什麼？有沒有辦法讓行開始在列上？如果不是，我該如何計算點位置？線條和列的數量以及x軸上的組數量會有所不同。

謝謝。

因爲有需要的代碼：

{ 
     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 
    }

來源

2016-09-15 LocustHorde

您可以添加到您行系列將與新x軸。這個系列將有更多的類別，所以蜱會比你的常規軸粗。

如果線條系列在圖表中包含相關的可見列系列，並且如果有，則可以將該系列添加到圖表。

在這裏，你可以找到我寫此情況下自定義功能：

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/

來源

2016-09-16 11:23:35

如何在HighCharts中的列上啓動行

回答

相關問題