如何将chartjs-gauge与vue-chartjs一起使用？

Question

我在我的 Vue2 应用程序中使用 vue-chartjs。 https://vue-chartjs.org/ 我想创建一个仪表图表并尝试使用 Chartjs-gauge 库。 https://www.npmjs.com/package/chartjs-gauge 但我不知道如何将它与 vue-chartjs 一起使用。

这是我在组件中使用折线图的方法：

<script>
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler,
} from "chart.js";
import { Line as LineChart } from "vue-chartjs";
import zoomPlugin from "chartjs-plugin-zoom";
import { eventBus } from "@/utils/event-bus";
import autocolors from "chartjs-plugin-autocolors";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  zoomPlugin,
  Filler,
  autocolors
);

export default {
  components: {
    LineChart,
  },
  props: {
    chartId: {
      type: String,
      default: "line-chart",
    },
    datasetIdKey: {
      type: String,
      default: "label",
    },
    width: {
      type: Number,
      default: 400,
    },
    selectedGrid: {
      type: Object,
    },
    height: {
      type: Number,
      default: 400,
    },
    cssClasses: {
      default: "",
      type: String,
    },
    styles: {
      type: Object,
      default: () => {},
    },
    plugins: {
      type: Array,
      default: () => [],
    },
    chartData: {
      type: Object,
      default: () => {},
      required: true,
    },
    chartOptions: {
      type: Object,
      default: () => {
        return {
          responsive: true,
          plugins: {
            zoom: {
              pan: {
                enabled: true,
                mode: "x",
                modifierKey: "ctrl",
              },
              zoom: {
                drag: {
                  enabled: true,
                },
                mode: "x",
              },
            },
            autocolors: {
              mode: "dataset",
            },
          },
        };
      },
      // required: true,
    },
  },
  data() {
    return {};
  },
  methods: {
    resetGraph() {
      const chartInstance = this.$refs.myChart;
      if (chartInstance) {
        this.$refs.myChart.$children[0].chart.resetZoom();

        eventBus.$emit("chart-zoom-reset", this.chartId);
      }
    },
    handleZoom({ chart }) {
      const { xAxisID, yAxisID } = chart.options.scales;
      const { left, right } = chart.chartArea;
      const { xMin, xMax, yMin, yMax } = chart.scales;
      const xRange = xMax - xMin;
      const yRange = yMax - yMin;
      const xMinNew = xMin + ((left - xMin) / (right - left)) * xRange;
      const xMaxNew = xMin + ((right - xMin) / (right - left)) * xRange;
      const yMinNew =
        yMin +
        ((chart.height - chart.chartArea.bottom) /
          (chart.chartArea.bottom - chart.chartArea.top)) *
          yRange;
      const yMaxNew =
        yMin +
        ((chart.height - chart.chartArea.top) /
          (chart.chartArea.bottom - chart.chartArea.top)) *
          yRange;
      chart.options.scales = {
        xAxisID: {
          ...xAxisID,
          min: xMinNew,
          max: xMaxNew,
        },
        yAxisID: {
          ...yAxisID,
          min: yMinNew,
          max: yMaxNew,
        },
      };
      chart.update();
    },
  },
  computed: {},
  mounted() {
    eventBus.$on("reset-zoom", (chartId) => {
      if (chartId && chartId === this.chartId) {
        this.resetGraph();
      }
    });
    eventBus.$on("grid-selected", () => {
      const chartInstance = this.$refs.myChart;
      if (chartInstance) {
        this.$refs.myChart.$children[0].chart.resize();
      }
    });
  },
  beforeDestroy() {
    eventBus.$off("reset-zoom", this.resetGraph);
    eventBus.$off("grid-selected");
  },
};
</script>

<template>
  <div class="chart-container">
    <div class="chart-container-body">
      <LineChart
        :data="chartData"
        :options="chartOptions"
        :plugins="plugins"
        ref="myChart"
        id="myChart"
        @zoom="handleZoom"
      />
    </div>
  </div>
</template>

所以我的问题是如何在我的 vue 组件中使用相同的方法来包含 Chartjs-gauge Gauge 组件。

Answer 1

事实证明，chartjs-gauge 已被弃用，并且不支持较新的 Chart.js 版本。 https://github.com/apertureless/vue-chartjs/issues/1081#issuecomment-1910537780