【问题标题】:Highstock export csv based on data grouping基于数据分组的Highstock导出csv
【发布时间】:2014-09-23 02:30:22
【问题描述】:

如何修改此代码,以便它根据data grouping 生成csv 数据

(function( Highcharts ) {

    'use strict';

    Highcharts.Chart.prototype.downloadCSV = function( returnOutput ) {
        var titles = [],
            xValues = [],
            line,
            csv = "",
            col,
            options = (this.options.exporting || {}).csv || {},
            totalSeries = 0,
            xNeedsSorting = false,

            // Options
            dateFormat = options.dateFormat || '%d-%m-%Y',
            itemDelimeter = options.itemDelimeter || ',',
            url = options.url || '/service/Export/exportchartcsv.php',
            lineDelimiter = options.lineDelimeter || '\n';      

        Highcharts.each(this.series, function( series, seriesNo ) {
            if ( series.options.includeInCSVExport === true ) return;
            if ( series.options.xAxis ) { // if option is set and not zero
                alert("Downloading charts as CSV with multiple axes is no supported, sorry.");
                throw false;
            }

            if ( titles.length === 0 ) {
                var xTitle = ((series.xAxis.options || {}).title || {}).text;

                if ( xTitle ) {
                    // series.xAxis.title.text exists and we use it
                } else if ( series.xAxis.isDatetimeAxis ) {
                    xTitle = 'Date / Time';
                    xNeedsSorting = true;
                } else if ( series.xAxis.categories ) {
                    xTitle = 'Category';
                } else {
                    xTitle = 'X values';
                }
                titles.push(xTitle);
            }

            titles.push(series.name.replace(/[^a-z0-9\s]/gi, '-'));
            totalSeries++;
        });

        Highcharts.each(this.series, function( series, seriesNo ) {            
            if ( series.options.includeInCSVExport === true ) return;           
            //console.log(series.options.alternateData);
            Highcharts.each(series.options.alternateData, function( point ) {
                var l = xValues.length;
                while ( l-- ) {
                    if ( xValues[l].x === point[0] ) {                      
                        xValues[l].y[seriesNo] = point[1];
                        return;
                    }
                }

                var y = new Array(totalSeries);
                y[-1] = point[0]; // -1nth element holds formatted x axis value             
                y[seriesNo] = point[1];
                if ( series.xAxis.isDatetimeAxis ) {
                    y[-1] = Highcharts.dateFormat(dateFormat, point[0]);
                } else if ( series.xAxis.categories ) {
                    y[-1] = Highcharts.pick(series.xAxis.categories[point[0]], point[0]);
                }

                xValues.push({ x : point[0], y : y });
            })
        });

        if ( xNeedsSorting ) {
            xValues.sort(function( a, b ) {return a.x - b.x});
        }
        csv = titles.join(itemDelimeter) + lineDelimiter;
        Highcharts.each(xValues, function( values ) {
            line = [];
            for ( col = -1; col < values.y.length; col++ ) {
                line.push(values.y[col]);               
            }
            csv += line.join(itemDelimeter) + lineDelimiter;
        });

        if ( returnOutput ) {
            return csv;
        } else {
            var title = ((this.title || {}).text || 'chart') + '.csv',
                a = document.createElement('a');

            if ( "download" in a ) { // modern browser - no need to use backend script
                a.href = 'data:attachment/csv,' + encodeURIComponent(csv);
                a.target = '_blank';
                a.download = title;
                document.body.appendChild(a);
                a.click();
                a.remove();
            } else {
                Highcharts.post(url, { csv : csv, title : title });
            }
        }
    };

    Highcharts.Chart.prototype.getCSV = function() {
        return this.downloadCSV(true);
    };

    // Now we want to add "Download CSV" to the exporting menu. We post the CSV
    // to a simple PHP script that returns it with a content-type header as a
    // downloadable file.
    // The source code for the PHP script can be viewed at
    // https://raw.github.com/highslide-software/highcharts.com/master/studies/csv-export/csv.php
    if ( Highcharts.getOptions().exporting ) {
        Highcharts.getOptions().exporting.buttons.contextButton.menuItems.push({
            text    : Highcharts.getOptions().lang.downloadCSV || "Export Data",
            onclick : function() { this.downloadCSV() }
        });
    }
}(Highcharts));

【问题讨论】:

    标签: javascript highstock export-to-csv


    【解决方案1】:

    首先,您使用的是旧版本的 export-csv,js 插件用于 Highcharts。从gitHub下载实际的。

    然后在#31#47 行中,您将看到series.xData.slice()/series.yData.slice()。该数组包含原始 x/y 值。如果您想要 dataGrouping 之后的值(应用近似值时),则从 x/yData 更改为 x/yProcessedXData:

    series.processedXData.slice();
    series.processedYData.slice();
    

    【讨论】:

    • 我使用旧版本的原因是因为我有一个图表,其中 x 轴是日期时间,当用户导出到 CSV 时,我不希望 xAxis 将为图表中的每个系列打印。
    • 那么您使用的是哪个版本的 Highstock?这是非常重要的信息。
    • v2.0.1。和最新的有很大不同吗?
    • 你的代码还能用吗?刚刚检查了 2.0.4 的源代码,我没有看到像 alternateData 这样的属性。你能用这个问题创建 jsFiddle 演示吗?那我来帮你。
    • 对不起@pawel,alternateData 是我的。我自己放在那里,它工作。现在显示所有每日数据,而不是显示分组。
    猜你喜欢
    • 2015-11-17
    • 2016-05-28
    • 1970-01-01
    • 1970-01-01
    • 2023-04-02
    • 2017-08-28
    • 1970-01-01
    • 2017-04-08
    • 1970-01-01
    相关资源
    最近更新 更多