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 dev工具中，两次都是相关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'))

希望它有所帮助。

Morris图表不接受我的json数据，但接受硬编码的示例数据

1 个答案: