Question

这里有JavaScript的绝对新手所以请原谅任何不良编码。

我一直在使用Highchart进行项目，希望读取文件的值（实际上将文件读入数组并获取特定值 - 我将使用其他值的其他值）。

在这里的其他人的帮助下，我现在可以将数组的值显示为HTML但是我无法将其传递到Highchart中。

我的原型页面（所以你可以看到输出）可以在

找到

http://maccas.chickenkiller.com/1.html

代码是

<html debug="false">
    <head>
        <title>Adam's hacked up demo</title>
        <META HTTP-EQUIV="refresh" CONTENT="300">
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/highcharts-more.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
    </head>

<script>

jQuery(function($){ // encapsulate jQuery
    $.ajax(
        {
            url:'livedata.txt',
            async:false,
            success: function(data){
            livedata = data.split(',');
            }
        });

    function drawGraph(phvalue) {
    var phvalue=livedata[3];
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'gauge',
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false
            },

            title: {
                text: 'live pH'
            },
                    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: 8,
                max: 9,

                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'
                },
                plotBands: [{
                    from: 8,
                    to: 8.3,
                    color: '#55BF3B' // green
                }, {
                    from: 8.3,
                    to: 8.7,
                    color: '#DDDF0D' // yellow
                }, {
                    from: 8.7,
                    to: 9,
                    color: '#DF5353' // red
                }]
            },

            series: [{
                name: 'Current pH',
                data: [phvalue],
                tooltip: {
                        valueSuffix: ' pH'
                }
            }]
        });
    }

    $(document).ready(function () {
        drawGraph();
    });

});
</script> 

<body>
    <table>
            <tr>
                <td><div id="container" style="width:90%; height:400px;"></div></td>
            </tr>
    </table>
</body>
</html>

有没有人知道如何让var phvalue显示在Highcharts中？

提前致谢。

Answer 1

由于ajax是异步的，因此您可以在请求完成后绘制图表

jQuery(function($){ // encapsulate jQuery

    $.ajax(
        {
            url:'livedata.txt',
            async:false,
            success: function(data){
                livedata = data.split(',');
                highcharts(livedata[3])
            }
        });


    function highcharts (phvalue) {
        $('#realtimeph').highcharts({
            chart: {
                type: 'gauge',
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false
            },

            title: {
                text: 'live pH'
            },
            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: 8,
                max: 9,

                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'
                },
                plotBands: [{
                    from: 8,
                    to: 8.3,
                    color: '#55BF3B' // green
                }, {
                    from: 8.3,
                    to: 8.7,
                    color: '#DDDF0D' // yellow
                }, {
                    from: 8.7,
                    to: 9,
                    color: '#DF5353' // red
                }]
            },

            series: [{
                name: 'Current pH',
                data: [phvalue],
                tooltip: {
                    valueSuffix: ' pH'
                }
            }]
        });
    }
});

Answer 2

这非常复杂。你想要：

$('#container').highcharts().series[0].points[0].update(x)

其中x是您要使用

更新的号码

如何将jquery结果传递给highchart

2 个答案: