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

【问题标题】：Using JSON in amcharts - How to modify a JSON output (Ruby on Rails)在 amcharts 中使用 JSON - 如何修改 JSON 输出（Ruby on Rails）
【发布时间】：2012-04-02 22:59:13
【问题描述】：

我正在尝试使用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 %>;

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

【问题讨论】：

您能否提供一个调用 amcharts 的示例？
嗨，乔，我在上面添加了一个完整的 javascript 示例。除此之外，唯一的其他部分是包括可以从他们的网站下载的 amcharts.js 文件。我希望这就是你的意思。如果没有，请告诉我。
在您给出的示例中，amCharts 不会读取 JSON，但浏览器的 JS 引擎会读取，然后代码将结果对象传递给 amCharts。但是任何浏览器都应该处理正确的 JSON 解析。这里到底发生了什么？

标签： ruby-on-rails ruby-on-rails-3 json graph amcharts

【解决方案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

还是动态构建字符串才是最难的部分？

【讨论】：

感谢 Mishaux，这对我很有帮助，给了我很多工作要做。我认为动态构建字符串是困难的部分，但是您的回答对我朝着正确的方向开始有很大帮助。谢谢！
这里是一个tutorial 遍历获取 amcharts 图表以从数据库中提取数据的过程。

【解决方案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");

【讨论】：