Блог

Я пытаюсь реализовать chart.js в моем проекте Vue3 я посмотрел на обертки, но они, похоже, не работают для меня (если вы не знаете, что делать?). Затем я нашел учебник о том, как это сделать с помощью обычного javascript. Я попробовал, и у меня почти получилось, но я не могу исправить последние несколько проблем.

В своем проекте я использую маршрутизатор Vuetify, Vuex и Vue.

У меня есть компонент «Графики», в котором я хочу отобразить все мои различные графики.

 lt;templategt;  lt;divgt;  lt;PlanetChart/gt;  lt;/divgt; lt;/templategt;  lt;scriptgt; import PlanetChart from '@/components/Graphs/Graph.vue'  export default {  name: 'App',  components: {  PlanetChart  } } lt;/scriptgt;  

У меня есть мой график.vue, здесь я визуализирую одну диаграмму.

 lt;scriptgt; import Chart from 'chart.js/auto' import planetChartData from '../../planet-data.js'  export default {  name: 'PlanetChart',  data() {  return {  planetChartData: planetChartData  }  },  mounted() {  const ctx = document.getElementById('planet-chart');  new Chart(ctx, this.planetChartData);  } } lt;/scriptgt;  

Наконец, у меня есть javascript, содержащий диаграмму. planet-data.js :

 export const planetChartData = {  type: 'bar',  data: {  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],  datasets: [{  label: '# of Votes',  data: [12, 19, 3, 5, 2, 3],  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)',  'rgba(255, 159, 64, 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)',  'rgba(255, 159, 64, 1)'  ],  borderWidth: 1  }]  },  options: {  scales: {  y: {  beginAtZero: true  }  }  }  };    export default planetChartData;