laravel 9 + Vue3 + (vue-google-charts)

Question

我试图从laravel后端显示数据到Vue3 (vue-google-charts)，但我没有找到任何资源

这是一个示例，如果我的json数据来自后端

[
{
interest_oid: 1,
total_cards: 2
},
{
interest_oid: 3,
total_cards: 1
},
{
interest_oid: 5,
total_cards: 2
},
{
interest_oid: 2,
total_cards: 1
},
{
interest_oid: 4,
total_cards: 1
},
{
interest_oid: 8,
total_cards: 1
}
]

我想在GChart中显示类型为"CulomnChart"比如这个

这是我的Vue组件

<div class="col-lg-6">
<GChart
type="ColumnChart"
:data="chartData"
:options="chartOptions"
style="height: 100%"/>
</div>

import {GChart} from "vue-google-charts";
export default {
components: {
GChart
},
props: {
contacts_per_interests: Array,
},
data() {
return {
chartData: this.contacts_per_interests,
chartOptions: {
width: 500,
height: 300,
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
}
}
}
}

但是它的显示" x表没有列"有什么资源或建议吗?

Answer 1

您的contacts_per_interests数组应该看起来像这样:

[
['interest_oid', 'total_cards'],
[1, 2],
[3, 1],
[5, 2],
[2, 1],
[4, 1],
[8, 1],
]

相应调整。像这样:

$json = '[
{
"interest_oid": 1,
"total_cards": 2
},
{
"interest_oid": 3,
"total_cards": 1
},
{
"interest_oid": 5,
"total_cards": 2
},
{
"interest_oid": 2,
"total_cards": 1
},
{
"interest_oid": 4,
"total_cards": 1
},
{
"interest_oid": 8,
"total_cards": 1
}
]';
$jsonArr = json_decode($json);
$array = [['interest_oid', 'total_cards']];
foreach ($jsonArr as $item) {
array_push($array, [$item->interest_oid, $item->total_cards]);
}