Highcharts 下采样 - CSV答案

【问题标题】：Highcharts downsampling - CSVHighcharts 下采样 - CSV
【发布时间】：2016-04-11 08:10:08
【问题描述】：

我正在开发一个网络应用程序，我使用 JS Highcharts 插件来帮助我绘制一些图表。有时我会加载一个包含 4 列的超过 100 000 行的 CSV 文件。

显然，图表插件遇到了一些问题。所以，我不能直接对我的 CSV 文件进行下采样，但是我找到了一个可以完成这项工作的 Downsampling Highcharts 插件 (http://www.highcharts.com/plugin-registry/single/13/Highcharts-Downsample)！

但实际上，这个插件可能只初始化一个带有阈值的系列..而且我不知道如何将这个方法应用到我通过 CSV 加载的系列上..

我像这样加载我的 CSV，而不是插件用法指定的“系列”属性：

data: {csv: csv},

插件文档告诉我们这样使用它：

series: [{
  downsample: {
    threshold: 1000 // 0 disables downsampling for this series.
  },
  data: // Your data (array of arrays with two values or array of numerical values)
}]

但我不使用“系列”属性，因为我直接从 CSV 文件加载我的系列..

所以，我想找到一个解决方案，使用这个 Downsampling Hicharts 插件对我的 CSV 文件进行下采样 ..

非常感谢！

【问题讨论】：

标签： javascript jquery csv highcharts downsampling

【解决方案1】：

所以，终于，我找到了解决方案！我自己解析我的 CSV 文件，我可以指定 downsample 属性：

var options = {                      //Initialize my chart's option
                chart: {
                    zoomType: 'x',
                    renderTo: $('#chart-'+unused)[0]
                },
                title: {
                    text: elem.title
                },
                 credits: {
                    enabled: false
                },
                xAxis: {
                    categories: [], //initialize empty category array
                    type: "line"
                },
                yAxis: {
                    title: {
                        text: "milli-SI"
                    }
                },
                series: [] //initialize empty serie array
            };

var lines = csv.split('\n');
$.each(lines, function(lineNo, line) {
    var items = line.split(',');
    if (lineNo == 0) {
        $.each(items, function(itemNo, item) {
            if (itemNo > 0) {
                var series = {
                    data: [],
                    name: item,
                    downsample : {threshold: 2000} //initialize downsample for a specific serie
                };
                options.series.push(series);
            }
        });
    }

    else {
        $.each(items, function(itemNo, item) {
            if (item.length == 0)
                return;
            if (itemNo == 0) {
                options.xAxis.categories.push(item);
            } else {
                options.series[itemNo -1].data.push(parseFloat(item));
            }
        });
    }

});
var chart = new Highcharts.Chart(options);

【讨论】：