如何解析数据并将其传递到我的Morris.js图表 [英] How to parse and pass data to my Morris.js chart

问题描述

我想在应用程序中使用莫里斯图表来显示一些数据.首先，让我向您展示我的js:

I want to use morris charts in my application to display some data. First, let me show you my js:

var handleStoreIncomeShareDonutChart = function() {
    var green = '#00acac';
    var blue = '#348fe2';

    Morris.Donut({
        element: 'storeincomeshare-donut-chart',
        data: [
            {label: "Store 1", value: 69},
            {label: "Store 2", value: 31}
        ],
        colors: [green, blue],
        labelFamily: 'Open Sans',
        labelColor: 'rgba(255,255,255,0.4)',
        labelTextSize: '12px',
        backgroundColor: '#242a30'
    });
};

这是我的Charts.js文件中的代码段.此代码有效.但是现在我想从数据库中添加数据.

This is a snippet in my charts.js file. This code works. But now I want to add data from my database.

我看到了不同的方法，但是似乎没有任何效果.dd的数据如下所示:

I have seen different approaches on this, but nothing seems to work for me. the dd'ed data looks like this:

array:2 [▼
  1 => array:2 [▼
    "name" => "Store 1"
    "value" => 25
  ]
  2 => array:2 [▼
    "name" => "Store 2"
    "value" => 75
  ]

]

我该如何解析这些数据?以及如何将其附加到图表中，因为我无法在js文件中执行刀片语法样式/php.

How do I need to parse this data? And how can I attach it to my chart, because I can't do blade syntax style/php in js files.

谢谢，鲁玛

我有更新！您的回答对我有很大帮助，但我仍然有一个小问题.我知道问题所在，但无法说出原因.

I have an update! Your answer helped me a lot, but I still habe a small problem. I know the problem, but can't tell why it happens.

让我们来看看这个示例数据:

Let's take this sample data:

$data = [
    [
        "label" => "Store 1",
        "value" => "75"
    ],
    [
        "label" => "Store 2",
        "value" => "25"
    ],
];

DD的机智将如下所示:

DD'ed wit will look like this:

array:2 [▼
  0 => array:2 [▼
    "label" => "Store 1"
    "value" => "75"
  ]
  1 => array:2 [▼
    "label" => "Store 2"
    "value" => "25"
  ]
]

执行 json_encode($ data)和dd结果将如下所示:"[{{" label:"商店1，"值:" 75}，{"标签:"商店2，"值:" 25}]" 或格式化:

Doing json_encode($data) and dd the result will look like this: "[{"label":"Store 1","value":"75"},{"label":"Store 2","value":"25"}]" or formated:

[
    {
    "label": "Store 1",
    "value": "75"
},
{
    "label": "Store 2",
    "value": "25"
}

]

这是有效的JSON，可与morris.js图表​​一起使用.但是，当我对数据库中的数据进行同样的操作时，会有一些有趣的事情.

This is valid JSON and works with the morris.js chart. But there is something interesting when I do the same with my data from db.

DD'ed看起来像这样:

DD'ed it will look like this:

array:2 [▼
  1 => array:2 [▼
    "label" => "Store 1"
    "value" => 75
  ]
  2 => array:2 [▼
    "label" => "Store 2"
    "value" => 25
  ]
]

json_encode()不会像上面那样编码:

And json_encode() will NOT encode it the way it did above:

{
    "1": {
        "label": "Studio Friedberg",
        "value": 0
    },
    "2": {
        "label": "Studio Klein-Auheim",
        "value": 0
    }
}

这也是有效的JSON，但morris.js图表​​不接受.我花了一些时间才弄清楚，为什么会这样.您不可能发现两者之间的差异如此之大，所以让我们看一下这两张图片:

This is also valid JSON, but not accepted by the morris.js chart. It took me some time to figure it out, why this happens. You can't spot the difference so good, so let's take a look at these two pictures:

那我的问题是什么?我有一个foreach循环，在其中将数组键设置为商店的ID.

So what was my problem? I had a foreach loop in which I set the array key to the id of the store.

推荐答案

您可以使用array_map将其转换为正确的格式，并在加载之前将其作为变量输出到< script> 中您的 handleStoreIncomeShareDonutChart 文件.以下代码应在PHP 5.3及更高版本中工作.

You can convert it to the correct format with an array_map, and output it as a variable in a <script> before loading your handleStoreIncomeShareDonutChart file. The following code should work in PHP 5.3 and above.

$data = array(
  array(
    'name' => 'Store 1',
    'value' => 25,
  ),
  array(
    'name' => 'Store 2',
    'value' => 75,
  ),
);

$output = array_map(function ($record) {
  return array(
    'label' => $record['name'],
    'value' => $record['value'],
  );
}, $data);
echo '<script>var morris_data = ' . json_encode($output) . ';';

这篇关于如何解析数据并将其传递到我的Morris.js图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！