vue-chart 数据正确加载但选项被忽略

Question

这让我发疯了。

我有一张来自vue-chart 的图表，chartData 已正确加载，图表显示正确，但options 绝对没有考虑在内，尽管在renderChart 调用的最后将它们静态设置。

这是使用vue2/chartjs 2.9.4/vue-chartjs 3.5.1。

<script>
  import { Line, mixins } from 'vue-chartjs'

  const {reactiveProp} = mixins;

  export default {
    extends: Line,
    mixins: [reactiveProp],
    mounted () {
      this.doRenderChart();
    },
    methods: {
      doRenderChart() {
        this.renderChart(this.chartData, {
          responsive: true,
          plugins: {
            title: {
              display: true,
              text: (ctx) => 'My Title'
            },
            tooltip: {
              mode: 'index'
            },
          },
        })
      }
    },
  }
</script>

谁能帮忙？

大多数其他类似主题都是{options: {actualoptions}} 对象的问题，但这里不是这样。

可能是版本问题？使用 vue-chart 3.5.1 而其他库在 v2 中？但是文档没有具体说明这一点。

感谢支持

Answer 1

您在使用 V2 时使用的是 chart.js 的 V3 语法，因此无法正常工作。 在 V2 中，title 和 tooltip 配置必须位于选项对象的根目录中，并且必须将 tooltip 重命名为 tooltips。

对于所有文档，您可以阅读 V2 配置以查看在何处指定内容：https://www.chartjs.org/docs/2.9.4/

或者您可以反向使用迁移指南：https://www.chartjs.org/docs/master/getting-started/v3-migration.html