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

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

vue-chart data is loaded correctly but options are ignored

vue.js

chart.js

vue-chartjs