从 csv 到 HighCharts 散点图答案

【问题标题】：from csv to scatter plot with HighCharts从 csv 到 HighCharts 散点图
【发布时间】：2021-08-09 08:42:00
【问题描述】：

我在这样的文件中有 csv 数据，我想用 HighCharts 为自己可视化。（HC 9.1.2）（我有一个脚本来生成该 csv 文件，因此我可以更改格式，例如在值周围添加“”等）

timeStamp, comp1, comp2, comp3, comp4, comp5, comp6, comp7 
2021-06-01T07:25,1.2956255070603753,5.621251073948186,nan,nan,0.5684268562524918,nan,1.0481975872029958
2021-06-01T08:25,1.8961084548957827,4.829703548214566,nan,nan,1.0555524189214427,nan,0.9991951306381098
2021-06-01T09:25,2.1008266771137323,5.5017113040150765,nan,nan,1.0486311423600163,nan,1.0431028886757223
2021-06-01T10:25,2.2899543465080057,5.244678688485554,nan,nan,1.0471302775594917,nan,1.082224140790202
2021-06-01T11:25,2.426462445619136,3.848390572693991,nan,nan,1.0686299640193513,nan,1.129274103129971

我可以将数据绘制为普通线图，但问题是生成的图表中的日期戳不正确。其次是时间间隔不是恒定的。（在 1h、3h、6h 和 12h 之间变化。）因此它必须是散点图。

问题是如何从上面的数据集生成散点图。第一列是日期时间戳，然后下一列是来自不同参数的值。（典型环境数据）

目前我已经尝试了以下方法的各种版本：

第一次读取数据：

        var jqxhr = $.get(cstatfile, function(data) {
            var lines = data.split('\n');
            $.each(lines, function(lineNo, line) {
                var items = line.split(',');
                a.push(items[0]);
                b.push(parseFloat(items[1]));
                c.push(parseFloat(items[2]));
                d.push(parseFloat(items[3]));
                e.push(parseFloat(items[4]));
                f.push(parseFloat(items[5]));
                g.push(parseFloat(items[6]));
                h.push(parseFloat(items[7]));
                i.push(parseFloat(items[8]));
            })

然后试图说出哪些列是哪些数据。但没有找到正确的方式来说明 a 列是 x 轴的日期时间戳。

       var options = {

                chart: {
                    renderTo: 'chart',
                    type: 'scatter',
                    zoomType: 'xy'
                },
                tooltip: {
                    backgroundColor: '#FCFFC5',
                    borderColor: 'black',
                    borderRadius: 10,
                    borderWidth: 3

                },
                title: {
                    text: 'Environmental dataset'
                },
                xAxis: {
                    title: {
                        text: 'Last 30 days'
                    },
                    type: "datetime",
                },
                yAxis:  [{
                    title: {
                        text: 'component values',
                    }
                }],
                tooltip: {
                        shared: true
                },
                plotOptions: {
                        line: {
                                marker: {
                                        enabled: false
                                        }
                                },
                        area: {
                                marker: {
                                        enabled: false
                                        }
                                },

                        series: {
                        }
                },
                series: [{
                        xAxis: 0,
                        name: 'timestamp',
                        data: a,
                        },{
                        yAxis: 0,
                        name: 'comp1',
                        type: 'line',
                        data: b,
                        color: '#00C853',
                        lineWidth: 1
                        },
                        {
                        yAxis: 0,
                        name: 'comp2',
                        type: 'line',
                        data: c,
                        color: '#40C4FF',
                        lineWidth: 1
                        },
                        {
                        yAxis: 0,
                        name: 'comp3',
                        type: 'line',
                        data: d,
                        color: '#A1887F',
                        lineWidth: 1,
                        },
                        {
                        yAxis: 0,
                        name: 'comp4',
                        type: 'line',
                        data: e,
                        color: '#FF3D00',
                        lineWidth: 1
                        },
                        {
                        yAxis: 0,
                        name: 'comp5',
                        type: 'line',
                        data: f,
                        color: '#FF0000',
                        lineWidth: 1
                        }, {
                        yAxis: 0,
                        name: 'comp6',
                        type: 'line',
                        data: g,
                        color: '#D500F9',
                        lineWidth: 1
                        }, {
                        yAxis: 0,
                        name: 'comp7',
                        type: 'line',
                        data: h,
                        color: '#0060ff',
                        lineWidth: 1
                        }]
        };

试图找到一个如何做到这一点但没有成功的例子。我找到了一些 xy 散点图示例，但不适合我的数据集的方法。然后找到 x 轴是时间的示例，但没有设法将其应用于我的数据集。找不到答案真烦人。

有什么提示吗？提前谢谢...

【问题讨论】：

标签： csv highcharts time-series timestamp scatter-plot

【解决方案1】：

我试图重现您的问题，这就是我所取得的成果：https://jsfiddle.net/BlackLabel/dfwtxay1/

Highcharts.chart('container', {
 chart: {
  events: {
   load: function() {
    var chart = this;
    chart.series.forEach(function(series) {
     series.update({
      type: 'scatter'
     })
    })
   }
  }
 },
 data: {
  csv: document.getElementById('csv').innerHTML,
  complete: function(options) {
   console.log(options)
  }
 }
});

基本上，您可以更新加载函数中的所有系列，使它们分散系列。此外，使用数据部分中的完整功能，您可以在将数据解析到图表之前对其进行修改。

关于时间戳，它们取决于数据，但您可以使用诸如 tickInterval 之类的属性来修改它们。

【讨论】：