在 x 轴 Highcharts 上绘制多条线

Question

我需要绘制一个图表，显示用户数量的变化（增加或减少）代表员工在活动中所做的更改，为此我正在维护员工活动的更改日志。 所以我需要在每个 x 轴系列上绘制 x 轴线。

我搜索过，但没有找到任何合适的答案。 这个Js Fiddle只有一条线绘制在 x 轴上，但我需要在每个 x 轴系列上绘制线。

一种可能的结果可能是，但需要为我需要的每一行生成 plotlines 对象。

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

Answer 1

是的，您需要自己生成 plotlines 数组，其值与数据的 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
    }]
});

Answer 2

迟到的答案，但您可以通过更改刻度线位置在每个 x 轴系列上绘制线条：

xAxis: {
        tickWidth: 1,
        tickmarkPlacement: 'on',
        gridLineWidth: 1
    }