Question

我正在尝试从csv读取数据并将其显示为Speedometer的输入，但我无法获取图表。请告诉我哪里出错了。

我的代码是：

$(document).ready(function() {          
    var options = {
        chart: {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },
        title: {
            text: 'Speedometer'
        },
        pane: {
            startAngle: -150,
            endAngle: 150,
            background: [{
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#FFF'],
                        [1, '#333']
                    ]
                },
                borderWidth: 0,
                outerRadius: '109%'
            }, {
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#333'],
                        [1, '#FFF']
                    ]
                },
                borderWidth: 1,
                outerRadius: '107%'
            }, {
                // default background
            }, {
                backgroundColor: '#DDD',
                borderWidth: 0,
                outerRadius: '105%',
                innerRadius: '103%'
            }]
        },
        // the value axis
        yAxis: {
            min: 0,
            max: 100,

            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 10,
            minorTickPosition: 'inside',
            minorTickColor: '#666',

            tickPixelInterval: 30,
            tickWidth: 2,
            tickPosition: 'inside',
            tickLength: 10,
            tickColor: '#666',
            labels: {
                step: 2,
                rotation: 'auto'
            },
            title: {
                text: 'km/h'
            },
            plotBands: [{
                from: 0,
                to: 120,
                color: '#55BF3B' // green
            }, {
                from: 120,
                to: 160,
                color: '#DDDF0D' // yellow
            }, {
                from: 160,
                to: 200,
                color: '#DF5353' // red
            }]        
        },  
        series: []
    };               
    $.get('data.csv', function(data) {              
        var series = {
            data: [],
            name: 'Speed',
            tooltip: {
                valueSuffix: ' km/h'
            }
        };

        series.data.push(parseFloat(data));
        options.series.push(series);
        alert("data "+options.series);
        var chart = new Highcharts.Chart(options);                      
    });
});

并且csv文件很简单 data.csv只有一个值30。或者是

t1,30
t2,40
t3,60

如何以相应的速度显示3个相应的速度表。非常感谢您的帮助。提前谢谢。

Answer 1

在您的案例数据中，您的数据（来自ajax）是单个字符串，但您需要拆分元素，然后选择应解析为整数（parseFloat）。

Highchart车速表从csv获取输入

1 个答案: