在沒有parseJSON的情況下獲取高分佈數據

Question

我試圖讓highcharts通過AJAX查詢動態更新圖表。目前，我有服務器爲新圖表返回JSON，然後使用parseJSON進行解析。這一切都很好，除了一件事情 - 高級代碼的通常格式不是真正的JSON，所以圖表的格式在文件中是不同的。 （例如，鍵入：「巴」有可能成爲「類」：「酒吧」進行適當的JSON）

這裏的主網頁代碼：

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

<script> 
$(function() { 
     $('#container').highcharts({ 
      title: { 
       text: 'Monthly Average Temperature', 
       x: -20, 
       style: { 
        color: 'rgb(103,103,103)', 
        fontFamily: '"Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif' 
       } 
      }, 
      subtitle: { 
       text: 'Source: WorldClimate.com', 
       x: -20, 
       style: { 
        color: 'rgb(103,103,103)' 
       } 
      }, 
      xAxis: { 
       categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
      }, 
      yAxis: { 
       title: { 
        text: 'Temperature (C)', 
        style: { 
         color: 'rgb(103,103,103)' 
        } 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#808080' 
       }] 
      }, 
      legend: { 
       layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'middle', 
       borderWidth: 0 
      }, 
      series: [{ 
       name: 'Tokyo', 
       color: 'rgb(62,144,200)', 
       data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], 
       point: { 
        events: { 
         click: function() { 
          $.get('thetest/test.php', function (data) { 
           var temp=jQuery.parseJSON(data); 
           $('#container').highcharts(temp); 
          }) 
         } 
        } 
       } 
      }, { 
       name: 'New York', 
       color: 'rgb(128,183,101)', 
       data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
      }, { 
       name: 'Berlin', 
       color: 'rgb(145,111,79)', 
       data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
      }, { 
       name: 'London', 
       color: 'rgb(207,186,132)', 
       data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
      }, { 
       name: 'Last One', 
       color: 'rgb(70,95,119)', 
       data: [13.9, 14.2, 15.7, 18.5, 21.9, 25.2, 27.0, 26.6, 24.2, 20.3, 16.6, 14.8] 
      }] 
     }); 
    }); 
</script> 

這裏是一個的被退回的JSON ：

{ 
    "chart": { 
     "type": "bar" 
    }, 
    "title": { 
     "text": "Historic World Population by Region" 
    }, 
    "subtitle": { 
     "text": "Source: Wikipedia.org" 
    }, 
    "xAxis": { 
     "categories": ["Africa", "America", "Asia", "Europe", "Oceania"], 
     "title": { 
      "text": null 
     } 
    }, 
    "yAxis": { 
     "min": 0, 
     "title": { 
      "text": "Population (millions)", 
      "align": "high" 
     }, 
     "labels": { 
      "overflow": "justify" 
     } 
    }, 
    "tooltip": { 
     "valueSuffix": " millions" 
    }, 
    "plotOptions": { 
     "bar": { 
      "dataLabels": { 
       "enabled": true 
      } 
     } 
    }, 
    "legend": { 
     "layout": "vertical", 
     "align": "right", 
     "verticalAlign": "top", 
     "x": -40, 
     "y": 100, 
     "floating": true, 
     "borderWidth": 1, 
     "backgroundColor": "#FFFFFF", 
     "shadow": true 
    }, 
    "credits": { 
     "enabled": false 
    }, 
    "series": [{ 
     "name": "Year 1800", 
     "data": [107, 31, 635, 203, 2] 
    }, { 
     "name": "Year 1900", 
     "data": [133, 156, 947, 408, 6] 
    }, { 
     "name": "Year 2008", 
     "data": [973, 914, 4054, 732, 34] 
    }] 
} 

這工作完全當然...但有什麼辦法，只是從test.php的將結果傳遞迴標準「highcharts」格式，而不是JSON？

Answer 1

這裏有一個誤區...... Highcharts沒有一個專門爲它設計的配置「格式」，就你問的問題而言。 Highcharts採用Javascript配置對象，這與JSON不同。

如果你聽說過這樣的說法：「每個正方形都是矩形，但每個矩形都不是正方形」？這種說法類似，所有的JSON都可以解釋爲Javascript，但並不是所有的Javascript都可以解釋爲JSON。這很重要，因爲這意味着JSON可以被當作Javascript的一個子集，這意味着它可以被解釋爲JavaScript（尤其是Javascript對象）。然後，您可以從服務器返回JSON並將其轉換爲JavaScript對象，以用作您的anychart配置對象。

這是相關的原因是它看起來像從服務器返回的是Javascript對象定義（這是Highcharts實際使用的），而不是JSON。問題是你需要將文本轉換成Javascript並運行。這種情況有兩種解決方法，其中一種比另一種好得多。

1. 由於您當前正在返回一個Javascript對象作爲文本，您可以在該對象上使用eval（）函數。這是一個糟糕的決定，有一種說法是「eval是邪惡的」。出於所有這些原因，你可以在網上查找它，但是你也許能夠使用這條路線而沒有問題。

2. 另一種選擇是當你最初存儲你的highcharts配置，或者當你從你的php文件返回時，你可以確保語法符合JSON格式。它看起來像你的例子，這不會在你的程序如何工作方面有所作爲，它會更難實現。這是解決此問題的正確方法。

Answer 2

如果我理解正確的話，你需要做的是解析JSON字符串中的對象：

var json = '{ "chart": { "type": "bar" } }', 
    parsed = JSON.parse(json); 

$('#container').highcharts(parsed); 

http://jsfiddle.net/3QG6Q/

Answer 3

是的，你需要得到JSON，它可以返回在php中通過json_encode（）函數。

Answer 4

我將提出另一種方法。

正如Reimius所說Highcharts使用JavaScript對象進行圖表配置。配置可以是非常基本的Javascript對象，不涉及任何函數，在這種情況下，您可以將其解析爲json，並在客戶端使用它通過Ajax調用獲取它。儘管如此，我認爲這將是非常嚴格的。

我過去通過將服務器端生成的JavaScript配置文件包含到html中，就像其他任何Javascript文件一樣克服了這個問題。最終，這是在瀏覽器中訪問和運行Javascript代碼的方式。

E.g.假設我要顯示所選城市的溫度我的頁面在圖表上，我有一個端點，以獲取配置如下：

<server-address>/temperature/<id> 

和我從這個端點得到的是一個getter函數如下：

function getChartConfig() { 
    return { 
     title: { 
      text: 'Monthly Average Temperature', 
      x: -20, 
      style: { 
       color: 'rgb(103,103,103)', 
       fontFamily: '"Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif' 
      } 
     }, 
     subtitle: { 
      text: 'Source: WorldClimate.com', 
      x: -20, 
      style: { 
       color: 'rgb(103,103,103)' 
      } 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 
     yAxis: { 
      title: { 
       text: 'Temperature (C)', 
       style: { 
        color: 'rgb(103,103,103)' 
       } 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle', 
      borderWidth: 0 
     }, 
     series: [{ 
      name: 'Tokyo', 
      color: 'rgb(62,144,200)', 
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], 
      point: { 
       events: { 
        click: function() { 
         $.get('thetest/test.php', function (data) { 
          var temp=jQuery.parseJSON(data); 
          $('#container').highcharts(temp); 
         }) 
        } 
       } 
      } 
     }, { 
      name: 'New York', 
      color: 'rgb(128,183,101)', 
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
     }, { 
      name: 'Berlin', 
      color: 'rgb(145,111,79)', 
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
     }, { 
      name: 'London', 
      color: 'rgb(207,186,132)', 
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
     }, { 
      name: 'Last One', 
      color: 'rgb(70,95,119)', 
      data: [13.9, 14.2, 15.7, 18.5, 21.9, 25.2, 27.0, 26.6, 24.2, 20.3, 16.6, 14.8] 
     }] 
    }); 
} 

} 

，那麼你可以有你的HTML源代碼如下：

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

<!-- Notice Highcharts configuration is included as a javascript file --> 
<script type='text/javascript' src='<server-address>/temperature/1'></script> 

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

<script> 
$(function() { 
    $('#container').highcharts(getChartConfig()); 
</script> 

現在，你不必把它列入靜態的方式，你可以使用JQuery getScri動態加載的Javascript功能或其他方式。

我不確定這是否符合您的需求，但您明白了。我相信你可以將邏輯應用於你的需求。這在過去對我有效。