Диаграмма js: я скрещиваю ярлыки на моем круговом диаграмме и пончике. Не удалось получить сам график - PullRequest
Новая
       9

Диаграмма js: я скрещиваю ярлыки на моем круговом диаграмме и пончике. Не удалось получить сам график

0 голосов
/ 08 января 2019

Я пытаюсь достичь диаграмм с помощью vue js. Я получаю график без самого графика, но метки пересеклись. Я понятия не имею, что происходит не так.

enter image description here

Это должна быть моя круговая диаграмма. Как видите, я пересекаю метки, что означает удаление всех помеченных данных и, следовательно, дает мне пустой график. Вот мой код. 

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
        });
      }   
    }

1 Ответ

0 голосов
/ 08 января 2019

В коде рендеринга диаграммы есть проблема:

data: ['22, 33, 12, 18, 19'] должно быть передано как data: [22, 33, 12, 18, 19]. Я изменил ручку, и она работает -> https://codepen.io/anon/pen/dwKjqM

...