Vuejs - Chartjs - превращение кольцевой диаграммы в калибр - вращение

Question

Я новичок в vue.js, и ваша помощь и совет будут высоко оценены.

Я использую Chartjs и хочу повернуть круговую диаграмму, чтобы она выглядела как датчик.Я не уверен, где у меня проблемы с моим JavaScript, и я не получаю ошибок в консоли - можно ли мне любезно посоветовать

Я не уверен, если я не поместил «опции» в нужном месте

chartjs.html

<div class="wrapper">
  <div class="chart_header">chartjs guage</div>
  <vue-chartsguagejs></vue-chartsguagejs>
</div>

chartsjsgauge.js

import { Doughnut } from 'vue-chartjs'

export default {
  extends: Doughnut,
  mounted () {
    this.renderChart({
      labels: ["Log Level", "Debug", "Info", "Warn", "Error", "Fatal"],
      datasets: [{
        label: 'GitHub Commits',
        backgroundColor: ['rgb(255, 255, 255)', 'rgb(232,226,202)', 'rgb(226,210,172)', 'rgb(223,189,139)', 'rgb(223,162,103)','rgb(226,126,64)'],
        borderWidth: 0,
        hoverBorderWidth: 0,
        data: [50, 10, 10, 10, 10, 10],
      }],
      options: {
        cutoutPercentage: 0,
        rotation: -3.1415926535898,
        circumference: 3.1415926535898,
      }
    }, {responsive: true, maintainAspectRatio: false})
  }
}

В настоящее время это моя dougnut диаграмма, которую я пытаюсь повернуть в качестве меры

Answer 1

Я обнаружил, что реструктуризация моего кода в этом формате имела огромное значение:

import { Doughnut } from 'vue-chartjs'

export default {
  extends: Doughnut,
  data () {
    return {
      datacollection: {
        labels: ["Log Level", "Debug", "Info", "Warn", "Error", "Fatal"],
        datasets: [
          {
            label: 'GitHub Commits',
            backgroundColor: ['rgb(226,126,64)', 'rgb(232,226,202)', 'rgb(226,210,172)', 'rgb(223,189,139)', 'rgb(223,162,103)','rgb(226,126,64)'],
            borderWidth: 0,
            hoverBorderWidth: 0,
            data: [10, 10, 10, 10, 10],
          }
        ]
      },
      options: {
        rotation: -1.0 * Math.PI,
        circumference: Math.PI,
      }

    }
  },
  mounted () {
    this.renderChart(this.datacollection, this.options, {responsive: true, maintainAspectRatio: false})
  }
}