在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

回答

相关问题