javascript - 莫里斯图不接受我的 json 数据，但接受硬编码的示例数据

Question

dashboard_test.html.erb 文件:

<div class="panel-body">
  <%= content_tag(:div, "", id: "shoppers_chart", data: {shoppers_data: @test}) %>
</div>

brands_controller.rb 文件:

def dashboard_test

    @test = [
        {period: '2010 Q1',
        iphone: 2666,
        ipad: 542,
        itouch: 2647},
        {period: '2010 Q2',
        iphone: 2778,
        ipad: 2294,
        itouch: 2441} ]
end

包含硬编码数据的

shoppers.js 文件:

$(function() {

    Morris.Area({
        element: 'shoppers_chart',
        data: [
             {period: '2010 Q1',
             iphone: 2666,
             ipad: null,
             itouch: 2647},
             {period: '2010 Q2',
             iphone: 2778,
             ipad: 2294,
             itouch: 2441} ],
        xkey: 'period',
        ykeys: ['ipad', 'iphone', 'itouch'],
        labels: ['ipad', 'iphone', 'itouch'],

        pointSize: 2,
        hideHover: 'auto',
        resize: true

    });

});

这段代码^^工作正常。显示图表。

shopper.js 从 dashboard_test.html.erb 文件中提取数据:

$(function() {

    Morris.Area({
        element: 'shoppers_chart',
        data: $('#shoppers_chart').data('shoppers_data'),

        xkey: 'period',
        ykeys: ['ipad', 'iphone', 'itouch'],
        labels: ['ipad', 'iphone', 'itouch'],

        pointSize: 2,
        hideHover: 'auto',
        resize: true

    });

});

此代码 ^^ 不起作用。该图表完全空白 - 没有 x 或 y 轴标记或任何东西。

在我的 chrome 开发工具中，这两次都是相关 div 的输出:

<div id="shoppers_chart" 
     data-shoppers-data="[
       {"period":"2010 Q1","iphone":2666,"ipad":542,"itouch":2647},
       {"period":"2010 Q2","iphone":2778,"ipad":2294,"itouch":2441}]"   
     style="position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">

我尝试将 html_safe 添加到我的 content_tag 中，并尝试将其切换到 Coffeescript。

为什么不起作用？

Answer 1

数据内容是一个字符串:

//                         ⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓ STRING
data: $('#shoppers_chart').data('shoppers_data')

当你的图表需要一个对象时:

data: JSON.parse($('#shoppers_chart').data('shoppers_data'))

希望有帮助。