在x軸上繪製多條線Highcharts

-1

我需要繪製一個圖表，顯示用戶數量（增加或減少）的變化，代表員工對廣告系列所做的更改，爲此我維護員工活動的更改日誌。所以我需要在每個x軸系列上繪製x軸線。在x軸上繪製多條線Highcharts

我搜索了但還沒找到合適的答案。這個Js Fiddle在x軸上只繪製了一條線，但是我需要在每個x軸系列上繪製線條。

一個可能的結果可能是，但將需要爲我需要的每一行生成plotlines對象。

plotLines: [{ 
     color: '#FF0000', 
     width: 2, 
     value: 4.5 
    }, { 
     color: '#00FF00', 
     width: 2, 
     value: 5.5 
    }]

來源

2017-06-29 Arbaz Khan

並不清楚你想要的結果是什麼，或者它的一部分是你的實際問題。但是，是的，您將爲您需要的每個'plotLine'創建一個對象，如您在代碼中演示的那樣。那麼，你還需要什麼幫助？提供您的實際使用案例，提供您需要解決的具體問題以獲得最佳結果。 – jlbriggs

是的，你需要自己相匹配的數據的x值的值產生的故事情節陣列。由於您使用的是日增量，因此對於情節線使用相同的值。

http://jsfiddle.net/8mn674ch/1/

var data = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]; 
var plotlines = []; 
//var startTime = Date.UTC(2010, 0, 1).getTime(); 
var startTime = new Date(Date.UTC(2010, 0, 1)).getTime(); 
for(var i = 0; i < data.length; i++) { 
    var timeincr = startTime + 1000*3600*24*i; 
    console.log(new Date(timeincr)); 
    var pline = { // mark the weekend 
      color: 'red', 
      width: 2, 
      value: timeincr, 
      events: { 
       click: function() { 
        $report.html('click'); 
       }, 
       mouseover: function() { 
        $report.html('mouseover'); 
       }, 
       mouseout: function() { 
        $report.html('mouseout'); 
       } 
      } 
     }; 
    plotlines.push(pline); 
} 
Highcharts.chart('container', { 
    xAxis: { 
     plotLines: plotlines, 
     tickInterval: 24 * 3600 * 1000, 
     // one day 
     type: 'datetime' 
    }, 

    series: [{ 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4], 
     pointStart: Date.UTC(2010, 0, 1), 
     pointInterval: 24 * 3600 * 1000 
    }] 
});

來源

2017-06-29 14:04:11 Anders

謝謝安德烈斯，我如何添加工具提示繪製線。 –

繪圖線沒有工具提示。你可以有另外一個系列 - 一個散點圖 - lineWidth> 0 - 你可以設置它的數據的方式，該系列將被顯示爲一條垂直線，就像一條情節線。然後你的系列將看起來像情節，但與工具提示功能。 http://api.highcharts.com/highcharts/plotOptions.scatter.lineWidth – morganfree

在x軸上繪製多條線Highcharts

回答

相關問題