首页 文章

Highcharts下采样 - CSV

提问于
浏览
0

我正在开发一个网络应用程序,我使用JS Highcharts插件来帮助我绘制一些图表 . 有时我加载一个包含4列超过10万行的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文件进行下采样 .

非常感谢 !

1 回答

  • 0

    所以,最后,我找到了解决方案!我自己解析我的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);
    

相关问题