0

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>
4

2 に答える 2

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

それとも、難しい部分である文字列を動的に構築していますか?

于 2012-04-03T05:52:02.677 に答える
0

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");
于 2013-06-11T16:18:55.833 に答える