javascript - Chart js：我的饼图和甜甜圈上的标签越过了。无法获取图表本身

Question

我正在尝试用 vue js 实现图表。我得到的图表本身没有图表，但标签交叉。我不知道出了什么问题。

这应该是我的饼图。如您所见，我将标签交叉，这意味着删除所有标记的数据，因此给了我一个空图表。这是我的代码。

export const productChartData = {

  type: 'pie',
  data: {
    labels: ['Purchased', 'Return', 'Cancelled', 'Shipped', 'Returned'],
    datasets:[
      {
        data: ['22, 33, 12, 18, 19'],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)'
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)'
        ],
        borderWidth: 1
      }
    ]
  },
  options:{
    maintainAspectRatio:false,
    title:{
      display:true,
      fontSize:18,
      text: "Products"
    }
  }

}

export default productChartData;

在我的 .vue 文件中，

methods: {
      createChart(chartId, chartData){
        const canvas = document.getElementById(chartId);
        const ctx = canvas.getContext('2d');
        const myChart = new Chart(ctx, {
          type: chartData.type,
          data: chartData.data,
          options: chartData.options
        });
      }   
    }

标签： javascriptvue.jsvuejs2chart.jsvue-component

Answer 1

您的图表呈现代码中存在问题：

data: ['22, 33, 12, 18, 19']应该作为data: [22, 33, 12, 18, 19]. 我已经修改了笔并且它正在工作-> https://codepen.io/anon/pen/dwKjqM