Question

我只想在柱形图上显示一系列数据。一周的数字。

data.csv 1,6,7,3,6,15,9

我想以条形图显示：

$(document).ready(function() {

$.get('data.csv', function (csv) { 
    $('#container').highcharts({
        title: {
            text: 'Daily Usage'
        },
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            title: {
                text: 'Hours'
            }
        },
        labels: {
            items: [{
                style: {
                    left: '50px',
                    top: '18px',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                }
            }]
        },
        series: [{
            type: 'column',
            name: 'Day',
            data: {
                csv: csv
            }
        }, {
            type: 'spline',
            name: 'Average',
            data: [1, 16, 3, 6.33, 10, 3, 5],
            marker: {
                lineWidth: 2,
                lineColor: Highcharts.getOptions().colors[3],
                fillColor: 'white'
            }
        }
        ]
    });
});

});

图表无法渲染。它一片空白。但标题就在那里。

Answer 1

您可以将csv值放在数组中并使用JSON解析值。例如，

        series: [{
           name: 'Day',
           data: JSON.parse("[" + s1 + "]")  // s1 contains the csv values
        ]}

Answer 2

通常，CSV包含以逗号分隔的值，这些值将采用字符串格式。

虽然Highcharts接受数据以逗号分隔的数字数组存在。

请检查它们是否为字符串或数字，并在需要时将值解析为数字。

希望这可以帮助您解决问题。

Highcharts不显示csv文件中的图表

2 个答案: