Question

我正在尝试在我的vue-chart-js应用程序中实现VueJS 2.0，我浏览了文档，并使用了以下组件：

<div class="row">
    <vue-chart type="bar" :options="options" :data="chartData" style="width: 100%;height: 310px;"></vue-chart>
</div>

我在data()定义：

//for chart
options: {
    legend: {
        display: false
    },
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            //stacked: true,
            ticks: {
                beginAtZero: true,
            }
        }],
        xAxes: [{
            display: true,
            //stacked: true,
            ticks: {
                beginAtZero: true,
                barPercentage: 0.2,
                autoSkip: false,
            },
        }]
    },

我做了一些静态数据集以使我的图表正常工作，所以我的chartData看起来像这样：

if(type==="week"){
    this.chartData.labels=['1st Week', '2nd Week', '3rd Week', '4th Week', '5th Week', '6th Week']
    this.chartData.datasets= [
        {
            label:'Investor',
            data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 10, 20, 30, 40, 50],
            backgroundColor: "rgb(26, 179, 148)",
            borderColor: "rgba(26, 179, 148,1)",
        },
        {
            label:'Research',
            data: [50, 40, 30, 20, 10, 50, 40, 30, 20, 10, 50, 40, 30, 20, 10],
            backgroundColor: "rgb(138, 209, 194)",
            borderColor: "rgba(26, 179, 148,1)",
        },

    ]
}
else if(type==="month"){
    this.chartData.labels=['1st Month', '2nd Month', '3rd Month', '4th Month', '5th Month', '6th Month']
    this.chartData.datasets= [
        {
            label:'Investor',
            data: [90, 80, 70, 60, 50, 40, 30, 20, 10, 100, 10, 20, 30, 40, 50],
            backgroundColor: "rgb(26, 179, 148)",
            borderColor: "rgba(26, 179, 148,1)",
        },
        {
            label:'Research',
            data: [50, 40, 30, 20, 10, 50, 40, 30, 20, 10, 50, 40, 30, 20, 10],
            backgroundColor: "rgb(138, 209, 194)",
            borderColor: "rgba(26, 179, 148,1)",
        },

    ]
}

现在我向api调用指出了相同的内容，所以我做了类似的事情：

axios.get('api/interaction/chart?timeFormat='+type, {headers: getHeader()}).then(response => {
    if(response.status === 200)
    {
        this.chartData = response.data.chartData
        console.log(this.chartData)
    }
})

作为回应或console.log我的格式是这样的：

{
    "labels":["1st Week","2nd Week","3rd Week","4th Week","5th Week","6th Week"],
    "datasets":[
        {"label":"Investor","data":[0,0,0,0,0,0],"backgroundColor":"rgb(26, 179, 148)","borderColor":"rgb(26, 179, 148,1)"},
        {"label":"Research","data":[0,0,0,0,0,0],"backgroundColor":"rgb(138, 209, 194)","borderColor":"rgb(26, 179, 148,1)"}
    ]
}

我收到错误：

无效道具：道具“数据”类型检查失败。预期的对象，数组，得到字符串。发现于---＆gt; <VueChart>

我尝试使用JSON.parse(response.data.chartData)，但这也没有帮助我。指导我这个。

由于

Vue JS中的数据格式问题

0 个答案: