javascript - 如何解析数据并将其传递到我的 Morris.js 图表

Question

我想在我的应用程序中使用莫里斯图来显示一些数据。首先，让我向您展示我的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 文件中的一个片段。这段代码有效。但现在我想从数据库添加数据。

我在这方面看到了不同的方法，但似乎没有什么对我有用。 dd 数据如下所示:

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

]

我需要如何解析这些数据？我如何将它附加到我的图表中，因为我无法在 js 文件中执行 Blade 语法样式/php。

谢谢，鲁玛

<小时/>

编辑

我有更新!你的回答对我帮助很大，但我还有一个小问题。我知道问题所在，但不知道为什么会发生。

让我们看一下这个示例数据:

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

DD 的智慧看起来像这样:

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

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

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

]

这是有效的 JSON，可与 morris.js 图表配合使用。但是，当我对数据库中的数据执行相同操作时，会出现一些有趣的情况。

DD 后它看起来像这样:

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

并且 json_encode() 不会像上面那样对其进行编码:

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

这也是有效的 JSON，但不被 morris.js 图表接受。我花了一些时间才弄清楚为什么会发生这种情况。您无法很好地发现差异，所以让我们看一下这两张图片:

那么我的问题是什么？我有一个 foreach 循环，其中我将数组键设置为商店的 id。

Answer 1

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

$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) . ';';