Question

我想使用“日期”，“值1”，“值2”和“值3”列绘制线形图。在绘制时，我不想在图表上包含topic1，topic2和topic3，但是当我单击该行时，应该弹出相应的主题。这是我的数据表My data format 这是示例数据文件，它具有成千上万的此类行，这是一个外部csv文件。

有关如何执行此操作的任何建议？谢谢

Answer 1

我将浏览至https://www.highcharts.com/demo/line-basic。然后，我将示例解决方案作为jsfiddle（位于此处的按钮）并更改示例数据。只要我有适合我的解决方案，我就会进行测试和修改。

上面的解决方案为您提供了线性数据集的示例，因此每个日期都有一个数据点。因此，仅给出了开始日期：2010。这可能很难实现，因为您仅在读取csv之后才知道日期。

因此，我已经修改了上面的代码，现在您可以向其中添加非线性数据了。参见https://jsfiddle.net/b5kw308c/。

我添加了：

xAxis: {
    type: 'datetime'
},

现在数据块不同了：

    data: [
        [Date.UTC(2010, 1, 1), 29.9],
        [Date.UTC(2010, 1, 2), 30.5],
        [Date.UTC(2010, 1, 3), 34.4],
        [Date.UTC(2010, 2, 6), 40.2],
        [Date.UTC(2010, 2, 7), 46.0],
        [Date.UTC(2011, 1, 8), 60.0]
    ]

对于csv：您将需要一个小的javascript来读取csv并为列创建数组。这些必须与highcharts完全一样，请参见这些示例中的“系列”。

Answer 2

最简单的解决方案是使用seriesMapping选项并为每个点创建自定义属性，例如topic。然后，您将能够在工具提示中使用对该属性的引用：

data: {
    ...,
    seriesMapping: [{
        x: 0,
        y: 1,
        topic: 2
    }, {
        x: 0,
        y: 3,
        topic: 4
    }, {
        x: 0,
        y: 5,
        topic: 6
    }]
},
tooltip: {
    pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b> topic: <b>{point.topic}</b><br/>'
}

API参考：https://api.highcharts.com/highcharts/data.seriesMapping

实时演示：https://jsfiddle.net/BlackLabel/56kqb2nv/

使用一些数据列来绘制图表，而一些则显示在工具提示的图表上

2 个答案: