Question

我正在使用Highcharts来绘制服务器性能统计数据，内存，CPU等。我想添加支持事件并将窗口更改为这些图表。起初我虽然错误栏是完美的，但我需要将它们旋转到水平。据我所见，图表可以旋转，但只能旋转整个图表，而不是一个系列。

chart: {
            type: 'spline',
            inverted: true
        },

任何想法如何在我的图表上获得小横条，以表示事件的持续时间。根据严重程度着色赢得奖励积分。

Answer 1

使用plotLines来图表上的线条

yAxis: [{
plotLines:[{
value : where do you want the line,
color: 'color for the line'
}]
}]

xAxis

也是如此

如果您愿意，可以使用addPlotLine（）;

方法按需添加它们

这是plotLines http://jsfiddle.net/QWLhC/

的示例

chart.xAxis[0].addPlotLine({
value: where do you want the plotLine,
color: 'color of the plot line'
});

Answer 2

您可以使用简单的线条系列，其中每个错误栏将是单独的系列，但所有错误栏都将连接到一个主系列，请参阅示例：http://jsfiddle.net/3bQne/646/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    plotOptions: {
        line: {
            color: 'red',
            lineWidth: 10,
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: false
                    }
                }
            }
        }
    },
    series: [{
        type: 'column',
        name: 'some data',
        data: [4, 11, 5, 16, 9, 22, 11, 1]        
    }, {
        type: 'line',
        name: 'errors',
        id: 'err',
        data: [ [0, 4],[3, 4]]
    }, {
        type: 'line',
        name: 'errors',
        linkedTo: 'err',
        data: [ [3, 1], [6, 1]]
    }, {
        type: 'line',
        name: 'errors',
        linkedTo: 'err',
        data: [ [2,10], [3,10]]
    }]
});

Highcharts - 如何获得水平误差线？

2 个答案: