将 javascript 数据系列移动到 html 数据属性会破坏 Highchart

Question

我正在尝试按照这个示例将 Highcharts 图表添加到 Rails 应用程序

http://www.highcharts.com/demo/column-stacked

当我使用 javascript 配置图表时一切正常，但由于内容是动态的，我想将系列数据移动到数据属性上。

我在函数中修改了一行（查看上面链接中的选项）

series: $('#container').data('chart')

在视图中

<div id="container" style="width:100%;height:172px;" data-chart='<%= @data %>' ></div>

在控制器中

@data = [{
                name: 'John',
                data: [5, 3, 4, 7, 2]
            }, {
                name: 'Jane',
                data: [2, 2, 3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5]
            }]

现在我没有像示例中那样显示正确的图表，而是有一个非常混乱的图表，其中包含大约 100 个数据系列。

在 javascript 和 ruby​​ 下处理此数据数组的方式是否会导致这种差异？

Answer 1

尝试在视图中以content_tag 将数据传递给客户端，并将@data 重命名为@my_data：

<%= content_tag "div", id: "chart_data", data: {my_data: @my_data} do %>
<% end %>

重新加载页面，打开 JavaScript 控制台，使用 jQuery 查看 JavaScript 对象的格式是否正确：

$('#chart_data').data('my_data')

在一个实际的示例中，您需要将一组 Ruby 对象传递给客户端，这种技术适用于将 Ruby 对象数组转换为 JS 对象数组。有个好RailsCast on passing data to JS。