Highcharts

时间:2016-09-21 04:36:25

标签: javascript time highcharts overlap spline

我在Highcharts中有一个样条图。它有24小时的数据,即24点。现在,在这24小时内,发生了某些事件,我需要在样条图上显示为点。并且需要为这些点提供工具提示。如何在样条图上重叠这些点,包括它们的工具提示?并且这些重叠点也需要在x轴上映射到它们的相应时间。如果可以的话,有什么想法吗?

这是我想在JSfiddle中做的一个例子: - http://jsfiddle.net/ttyc5dod/

$(function () {
$('#container').highcharts({
    title: {
        text: 'Test Graph',
        x: -20 //center
    },
    xAxis: {
        categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
    },
    yAxis: {
        title: {
            text: 'Availability(%)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '°C'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [{
        name: 'Data',
        data: [7.0, 6.9, 9.5, 10, 11.2, 12.5, 15.2, 16.5, 13.3, 18.3, 13.9, 9.6, 12, 13, 12, 11.2, 9, 8, 5, 12, 14, 12, 12, 12.5, 10]
    }]
});
});

例如,在以下示例中,在23:00到24:00之间,我们假设发生了一个必须在此图表上显示的事件(问题)。有没有办法在23:00和24:00之间绘制一个点,显示事件,还应该有工具提示告诉有关事件的详细信息。输入代码

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:1)

如果事件发生,您应该能够添加新系列(我认为最佳将是分散系列)并在数据点之间添加散点。

如果您想在第一个系列的行上添加散点,则应该很容易计算此点的正确y位置。

在这里,您可以看到在两行之间添加散点图的简单示例:

var prepend = require('prepend');

prepend(FileName, 'String to be appended', function(error) {
    if (error)
        console.error(error.message);
});

在这里你可以看到一个如何工作的例子: http://jsfiddle.net/ttyc5dod/3/