vue.js - 无法在 Vue 中应用 datalabels chartjs 插件的选项

问题描述

我尝试通过Chart.js. _ vue-chartjs另外，我用[chartjs-plugin-datalabels][1]. 目前，我可以通过单击“显示图表”按钮来切换图表。

我可以看到图表中每个标签的值。但是，我无法自定义数据标签。

[堆栈溢出]

[插件的Github页面]

[JS小提琴]

即使在阅读了上面的信息之后，我也无法让我的工作。

我将不胜感激任何解决此问题的建议。谢谢！:)

我的一些代码如下：

<script>
import PieChart from "./pieChart.js";
import ChartJSPluginDatalabels from "chartjs-plugin-datalabels";

export default {
  name: "App",
  components: {
    PieChart
  },
  data() {
    return {
      isHidden: false,
      chartData: {
        labels: ["Green", "Red", "Blue"],
        datasets: [
          {
            backgroundColor: ["#41B883", "#E46651", "#00D8FF"],
            data: [1, 10, 5]
          }
        ]
      },
      options:{
        plugins: {
          datalabels: {
            color: 'white',
            textAlign: 'center',
            font: {
              weight: "bold",
              size: 16
            }
          }
        }
      }
    }
  }
};
</script>

请在此处查看完整代码： https ://codesandbox.io/embed/xy4x07q0o 。

标签： vue.jspluginschart.jsvue-chartjs

您需要将选项绑定到pie-chart

  <pie-chart v-if="isHidden" :data="chartData" :options="options"></pie-chart>

在这里结帐演示https://codesandbox.io/s/5kvll0xqyl

vue.js - 无法在 Vue 中应用 datalabels chartjs 插件的选项

问题描述

解决方案

推荐阅读