在amcharts中使用JSON-如何修改JSON輸出（Ruby on Rails）

Question

我正在嘗試使用amcharts ，我想使用JSON來格式化我的圖表的數據。 但是，似乎amcharts接受的語法不是有效的JSON。

這是硬編碼amchart圖表數據的javascript代碼：

 var chartData = [{
            country: "Czech Republic",
            litres: 301.90
        }];

如果我想使用嵌入的紅寶石創建相同的圖表，請使用以下代碼：

控制者

 @chart_data = [{"country": "Czech Republic", "litres": 301.90}]

視圖

 var chartData = <%= @chart_data.to_json %>;

有效的JSON輸出：

 [{"country": "Czech Republic", "litres": 301.90}]

但是，amcharts接受的是：

 [{country: "Czech Republic", litres: 301.90}]

因此，我的圖表無法正常工作，因為amcharts不接受有效的JSON。 那么，有沒有一種方法可以創建“無效的” JSON，而不會在國家和公升周圍加上雙引號？ 還是有更好的方法以amcharts接受的形式獲取數據？ 任何幫助將不勝感激。

這是完整的javascript：

 <script type="text/javascript">
        var chart;
        var legend;

        var chartData = [{
            country: "Czech Republic",
            litres: 301.90
        }, {
            country: "Ireland",
            litres: 201.10
        }, {
            country: "Germany",
            litres: 165.80
        }, {
            country: "Australia",
            litres: 139.90
        }, {
            country: "Austria",
            litres: 128.30
        }, {
            country: "UK",
            litres: 99.00
        }, {
            country: "Belgium",
            litres: 60.00
        }];

        AmCharts.ready(function () {
            // PIE CHART
            chart = new AmCharts.AmPieChart();
            chart.dataProvider = chartData;
            chart.titleField = "country";
            chart.valueField = "litres";
            chart.outlineColor = "#FFFFFF";
            chart.outlineAlpha = 0.8;
            chart.outlineThickness = 2;

            // WRITE
            chart.write("chartdiv");
        });
    </script>

Answer 1

我可能在這里缺少要點，但是如果您不在其他任何地方使用@chart_data，則可以在控制器中構建偽json數據字符串，並在視圖中刪除.to_json調用：

控制器：

@chart_data = "[{country: \"Czech Republic\", litres: 301.90}]" #build this string dynamically

視圖：

var chartData = <%= @chart_data %>;

如果您在其他地方使用@chart_data，也可以創建一個@formatted_chart_data

如果您想在不顯示圖表時使用ajax來減少開銷，則可以添加一個除了返回圖表數據並從js調用之外什么都不做的動作：

控制器：

def get_formatted_chart_data
  chart_data = "[{country: \"Czech Republic\", litres: 301.90}]"
  render :text => chart_data
end

還是動態地構建作為難點的字符串？

Answer 2

來自amCharts：“ amCharts不直接支持JSON。它不加載外部數據文件或任何東西。它僅使用本機JavaScript數據對象。因此，這實際上取決於瀏覽器的JS解析器它可以讀取或不能讀取什么格式的數據。”

http://www.amcharts.com/forum/viewtopic.php?id=7049

我假設您有一個以上的圖表，並且與易於使用默認json或RABL格式相比，為每個圖表建立自定義字符串格式器可能有點麻煩。

您還可以做的是創建一個通用的javascript函數，並使用一點RegEx將JSON過濾為amCharts友好格式。

function CleanJSONForAMCharts(json) {
    return json.replace(/"(\w+)"\s*:/g, '$1:');
}

現在，這當然現在仍然是字符串，而不是期望的對象amCharts數組。 必須先對返回的字符串調用Eval（），然后才能將其傳遞給dataProvider。

//sample data that would have been returned from a RESTful service or another JSON returning method
var chartData = CleanJSONForAMCharts("[{\"title\":\"sample 1\",\"value\":130},{\"title\":\"sample 2\",\"value\":26}]");

var chart = new AmCharts.AmSerialChart();
chart.categoryField = "title";
chart.dataProvider = eval(chartData);

var graph = new AmCharts.AmGraph();
graph.valueField = "value";
graph.type = "column";
graph.fillAlphas = 1;
chart.addGraph(graph);

chart.write("chartdiv");