Question

Highcharts Gauge getJson问题...

我有一个回显几个不同的json_encode的php文件。这是输出。我需要抓住3个Highcharts仪表中每一个的仪表数据。其他所有工作......这是clickdates.php。

的输出

{ “ampPowerP”：[161]， “dayPowerP”：[4.24]， “monthAmpP”：[755]， “monthPowerP”：[19.78]， “yearAmpP”：[14015] “yearPowerP”：[369.5] “统计中心”：[0]， “gauge1”：[24]， “gauge2”：[29.2]， “gauge3”：[69.2]}

我现在关注的是3规格输出，从我的阅读中得到正确的格式输出，以及Highcharts文档所说的正在寻找。

也许我让自己感到困惑，所以我制作了3个独立的JS文件来保持简单...每个div的gauge1.js，gauge2.js和gauge3.js文件将显示每个Highcharts规格。我已经尝试了在Highcharts论坛上列出的百万种方式以及这里已经回答的内容，但没有任何效果。我拿了一个没有显示针的仪表。我已经回到了基础，这是我为每一个计量器工作的基础。

这是gauge1.js

$(document).ready(function() {        
    var options = {
    chart: {
        type: 'gauge',          
        renderTo: 'minVolt',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false,          
        backgroundColor: null,      
        borderWidth: 0,

            spacingTop: 0,
            spacingLeft: 0,
            spacingRight: 0,
            spacingBottom: 0,


    },

    title: {
        text: null
    },

    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: 20,
        max: 40,

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

        tickPixelInterval: 20,
        tickWidth: 2,
        tickPosition: 'inside',
        tickLength: 10,
        tickColor: '#666',
        labels: {
            step: 2,
            rotation: 'auto'
        },
        title: {
            y: 20,
            text: 'Volts'
        },
        plotBands: [{
            from: 20,
            to: 22,
            color: '#DF5353' // red
        }, {
            from: 22,
            to: 23,
            color: '#FFFF00' // yellow
        }, {
            from: 23,
            to: 30,
            color: '#55BF3B' // green
        }, {
            from: 30,
            to: 40,
            color: '#DF5353' // red
        }]
    },       credits: {
         enabled:false,
},

    series: [{
        name: 'Volt',
         data: [],
      tooltip: {
        enabled: false
    },
    }]    }; 
    $.getJSON('clickdates.php', function(gauge1) {
    options.series[0].data = gauge1;
    var chart = new Highcharts.Chart(options);
});

}）;

getJSON中的某些东西必须是我没有看到的东西，而不是理解...... Highcharts正在寻找格式......

{"gauge1":[24]}

......这就是我发送的......

这个$ .getJSON应该可以正常运行，但数据库中没有数据......

    $.getJSON('clickdates.php', function(gauge1) {
    options.series[0].data = gauge1;
    var chart = new Highcharts.Chart(options);

它必须是简单的东西，但我看不到它......我的努力似乎都没有让JSON数据进入衡量标准......

非常感谢你的智慧。

艾伦

Answer 1

经过几天的阅读和尝试了一百万种不同的事情。这件事很简单，我没看到......

$.ajax({
    url: "clickdates.php",
    data: 'gauge1',
    type:'get',
    dataType: "json",
    cache: false, 
    success: function(json_data){
        options.series[0].data = json_data.gauge1;  
        var chart5 = new Highcharts.Chart(options);         
    }
});

AJAX让我得到答案......

{{1}}

整个时间都在我的鼻子底下......

周末愉快。

艾伦

Highcharts仪表 - getJSON

1 个答案: