0

我正在尝试使用amcharts并且我想使用 JSON 来格式化我的图表的数据。但是，amcharts 接受的语法似乎不是有效的 JSON。

以下是硬编码 amchart 图表数据的 javascript 代码：

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

如果我想用嵌入的 ruby​​ 创建相同的图表，下面是代码：

控制器

 @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 回答