Question

我正在尝试解析CSV文件中的数据，然后我查看了http://www.highcharts.com/docs中的说明。但是，提供的代码直接使用解析的数据来创建新图表，我无法理解如何将其应用于我当前的图表。我试图从CSV文件中获取字符串，并将它们用作JavaScript中的数组，以替换下面代码中的数值数组。

这是需要使用的图表： http://jsfiddle.net/strawberry/Cyxv6/

需要从文件中获取的数据如下：

类别：['2010'，'2011'，'2012'，'2013'，'2014']

名称：'鳄梨' ... 数据：[1600,1540,1350,1450,1600]，

名称：'apples'， ... 数据：[39000,40000,4500,11000,42000]，

名称：'oranges'， ... 数据：[8000,5000,4000,4500,3000]，

名称：'香蕉'， ... 数据：[4000,6000,4500,5000,4600]，

CSV文件中的数据：

年份鳄梨苹果桔子香蕉 y2010 1600 39000 8000 4000 y2011 1540 40000 5000 6000 y2012 1350 40500 4000 4500 y2013 1450 41000 4500 5000 y2014 1600 42000 3000 4600

代码：

$(function () {

    $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'apples and oranges and bananas and avocado'
        },
        // subtitle: {
        //     text: 'Source: WorldClimate.com'
        // },


        xAxis: [{
            categories: ['2010', '2011', '2012', '2013', '2014']
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}',
                style: {
                    color: '#89A54E'
                }
            },
            title: {
                text: 'other',
                style: {
                    color: '#89A54E'
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'fruits',
                style: {
                    color: '#4572A7'
                }
            },
            labels: {
                format: '{value}',
                style: {
                    color: '#4572A7'
                }
            },
            opposite: true
        }],

        tooltip: {
            shared: true
        },

        legend: {
            align: 'center',
            layout: 'horizontal',
            x: 0,


            title: {
                text: '<span style="font-size: 11px; color: #666; font-weight: normal" >To single out the different datasets, please click on the respective names below:</span>',
                style: {
                    fontStyle: 'italic'
                }

            }
        },






       series: [{
                name: 'avocado',
                color: '#d6bfe3',
                type: 'column',
                yAxis: 1,
                data: [1600,1540,1350,1450,1600],
                tooltip: {
                    valueSuffix: ' '
                }

        }, {
            name: 'apples',
            marker: {
                enabled: false
            },
            color: '#4da90c',
            lineWidth: 3,
            type: 'spline',

            dataLabels: {
                enabled: 'True'
            },
            data: [39000, 40000, 40500, 41000, 42000],

            tooltip: {
                valueSuffix: ''
            }
        },

        {
            name: 'oranges',
            marker: {
                enabled: false
            },
            color: '#f8a632',
            lineWidth: 3,
            type: 'spline',
            data: [8000, 5000, 4000, 4500, 3000],

            tooltip: {
                valueSuffix: ''
            }
        },


        {
            name: 'bananas',
            marker: {
                enabled: false
            },
            color: '#939b9d',
            style: "Dash",
            lineWidth: 3,
            type: 'spline',
            dashStyle: 'longdash',
            data: [4000, 6000, 4500, 5000, 4600],
            tooltip: {
                valueSuffix: ''
            }
        }



        ]
    });
})

Answer 1

一开始你需要熟悉我们的解析如何处理我们的数据。然后将解析器调整到您的数据，以实现结构（就像您已经硬编码）。您还需要通过跳过第一个字母将'y2003'转换为年份。（即indexOf或匹配字符串）。

如何将数据从CSV文件解析为数组，以便它可以用于预先格式化的Highchart

1 个答案: