javascript - Highcharts Gauge - 如何从文件读取输入?

标签 javascript highcharts

我目前刚刚开始使用 JS,需要一个项目的 highcharts,到目前为止一切顺利,但我确实有一个非常新手的问题: 我有一些任务执行 cron 作业并将值范围:10-90 输出到文件。如何将值加载到仪表中?

这是我改编的代码(范围、外观和感觉并不重要),我只能制作一个静态值53.8:

 $(function () {

    $('#container').highcharts({

        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: 200,

            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: [{
            name: 'Speed',
            data: [80],
            tooltip: {
                valueSuffix: ' km/h'
            }
        }]

    }
);
    $('#container').highcharts().series[0].points[0].update(50.8)
});

这是 jsfiddle 链接:http://jsfiddle.net/H8uGk/ ,你们能给我一些如何读取文件内容的提示吗? (本例中为数字)

有什么方法可以用 JavaScript 实现吗?它不需要是动态的,而且我避免使用 php。

谢谢,

最佳答案

最简单的方法是将其复制/粘贴到您的 js 文件中,我认为这还不够好,因为您希望它是动态的。

如果你需要它是动态的,你不能在javascript中这样做,因为javascript运行在客户端(即网络浏览器)上,但它需要从服务器(即原始机器)读取。因此,您必须创建一个“端点”来读取文件,在 php 中查看一些简单的内容,如下所示:

<?php
// > PHP 5
$file = file_get_contents('./gauge_data.txt', FILE_USE_INCLUDE_PATH);
?>

关于javascript - Highcharts Gauge - 如何从文件读取输入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18563555/

相关文章:

javascript - 单击添加按钮时不想清除文本框

javascript - Highcharts Sunburst 图表 - colorVariation.to 值的范围是多少?

javascript - 比 base64 更好的编码数据不会占用太多处理能力

javascript - 放大时更新分区 View (冰柱或旭日)

javascript - 从未隐藏的列表项中获取元素

javascript - 为什么 `splice.apply(arguments, 0)` 失败而 `splice.call(arguments, 0)` 返回数组

javascript - 删除 highcharts.com 积分链接

javascript - 扩展 Highmaps 副作用

javascript - 如何从 Highcharts 导出中删除 'data table' 选项

javascript - Highchart 范围选择器不显示