Question

我想知道是否有可能以某种方式在xAxis中创建一个定义间隔的垂直线（plotLines）。

给定日期的其中一条情节线的

Here's an example。是否可以在给定的时间间隔内定义它？

    xAxis: {
          tickInterval: 5 * 4 * 1000,
        lineColor: '#FF0000',
        lineWidth: 1,
        plotLines: [{
            value: Date.UTC(2014,03,05),
            width: 1,
            color: 'green',
            dashStyle: 'dash',
        }]
    },

Answer 1

您要找的是plotBand。这允许使用范围。一般用法如下：

        xAxis: {        
            plotBands: [{ // mark the weekend
                color: '#FCFFC5',
                from: Date.UTC(2010, 0, 2),
                to: Date.UTC(2010, 0, 4)
            }],
...

编辑 - 根据澄清，您可以生成如下系列：

chart: {
    events: {
        load: function () {
            // set up the updating of the chart each second
            var series = this.series[1];
            var Xmin = this.xAxis[0].min;
            var Xmax = this.xAxis[0].max;
            //console.log(Xmin);
            //console.log(Xmax);
            series.pointInterval = 24 * 3600 * 1000;
            series.pointStart = Date.UTC(2011, 0, 01, 0, 0, 0, 0);
            for (var i = Xmin; i < Xmax; i = i + (24 * 3600 * 1000)) {
                var x = i,
                    y = 1;
                series.addPoint([x, y], true);
            }

        }
    }
},

您需要事先制作新系列（但没有数据）：

series: [{
    name: 'USD to EUR',
    data: usdeur
}, {
    name: 'Interval',
    type: 'column',
    data: []
}

演示here。在您正在使用的图表上每秒执行此操作将会磨砺。我每天都在这样做。每分钟做一次需要很长时间。请注意，我只是在加载时将其添加到可查看的最小/最大值。如果您希望它跨越整个图表，则必须定义自己的Xmin和Xmax。

Answer 2

一般来说，在Highcharts中，不存在plotLines的范围。但是你可以为它创建简单的函数：http://jsfiddle.net/kZkWZ/57/

function generatePlotLines(from, to, interval) {
    var plotLines = [];

    while (from < to) {
        from += interval;
        plotLines.push({
            value: from,
            width: 1,
            color: 'green',
            dashStyle: 'dash',
            label: {
                text: 'some name',
                align: 'right',
                y: 122,
                x: 0
            }
        })
    }

    return plotLines;
}


$('#container').highcharts('StockChart', {

    xAxis: {
        plotLines: generatePlotLines(Date.UTC(2011, 0, 1), Date.UTC(2011, 3, 1), 7 * 24 * 3600 * 1000)
    },

    rangeSelector: {
        selected: 1
    },

    series: [{
        name: 'USD to EUR',
        data: usdeur
    }]
});

使用highstocks为间隔创建垂直线

2 个答案: