2016-10-12 5 views
0

Highcharts가해서 getJSON 문제 게이지 ...Highcharts 게이지 -해서 getJSON

나는의 여러 가지로 json_encode 에코 하나 개의 PHP 파일이 있습니다. 다음은 결과입니다. 3 개의 Highcharts 게이지 각각에 대한 게이지 데이터 만 가져와야합니다. 다른 모든 것은 작동합니다 ... clickdates.php의 결과입니다.

{ "ampPowerP"[161], "dayPowerP"[4.24] "monthAmpP"[755] "monthPowerP"[19.78] "yearAmpP"[14,015] "yearPowerP ": 369.5]을 "stateC은 "[0]"gauge1은 "[24]"gauge2은 "[29.2]"gauge3은 "[69.2]}

내 초점은 이제이고 3 게이지 출력은 내 독서에서 정확한 형식 출력이며 Highcharts 설명서에서 찾고있는 것으로 표시됩니다.

아마 혼란 스럽습니다. 그래서 3 개의 별도 JS 파일을 만들어서 각 Highcharts 게이지를 표시 할 각 div에 대해 gauge1.js, gauge2.js 및 gauge3.js 파일을 간단하게 유지했습니다. 나는 Highcharts 포럼에 열거 된 100 만 가지 방법을 시도해 왔으며 여기에 답을 얻었지만 아무 것도 작동하지 않습니다. 나는 바늘이없는 게이지를 얻는다. 나는 기초로 돌아 갔고 이것은 각 게이지에 대한 나의 기초이다. 나는 일을하려고 노력하고있다.

이것은 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]} 

를 찾고 있습니다 ... 그리고 내가 보내고 것입니다 .. .

I 차트 쇼를 가지고 있지만 데이터베이스에서 데이터가 없기 때문에이 $ .getJSON 작동합니다

...

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

그것은 간단해야하지만, 나는 그것을 볼 수 없습니다 ... 그리고 내 노력의 아무도 게이지에 JSON 데이터를 얻는 것 같지 않습니다 ...

당신의 지혜는 크게 감사드립니다.

앨런

+0

바늘은 게이지 차트의 한 점입니다. 포인트를 데이터 배열에 배치해야합니다. 포인트 자체는 배열 (예 : [ 'name', 10]) 또는 객체 (예 : {name : 'name', y : 10}) 일 수 있습니다. 따라서 형식이 올바르지 않습니다. 여기 예제 : http : // jsfiddle.net/hudj2gdo/1/또한 Ajax 요청을 사용하는 경우 코드에서 제외하고 (예 : 메모리에 데이터 넣기) 누군가가 쉽게 문제를 다시 만들 수 있다면 더 좋습니다. – morganfree

+0

숫자를 넣고 정적 게이지를 만드는 방법을 알고 있습니다. 내 문제는 PHP에서 게이지로 JSON 가져 오는 것입니다. 결과를 표시하기 위해 JSON을 div에 쉽게 넣을 수 있습니다. 나는 게이지에 넣는 것을 더 좋아합니다. $ .getJSON은 작동하지 않으며 AJAX도 아닙니다 ... – HKmarine

답변

0

백만 가지의 다른 것들을 읽고 시도한 후. 그것은

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

AJAX 대답에 저를 얻었다 것입니다 ...

$.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);   
    } 
}); 

그것은 바로 내 코 전체 시간에서했다 ... 나는 보지 못했다 매우 간단한 것이 었습니다 ...

좋은 주말 되세요.

앨런