我尝试通过 vue-chartjs
在 Vue 中使用 Chart.js
。另外,我使用了 [chartjs-plugin-datalabels][1]
。目前,我可以通过单击“显示图表”按钮来切换图表。
我可以看到图表中每个标签的值。但是,我无法自定义数据标签。
[计算器溢出]
- How to properly use the chartjs datalabels plugin
- ChartJS: datalabels: show percentage value in Pie piece
- Show values on top of bars in chart.js
[插件的 Github 页面]
- https://github.com/chartjs/chartjs-plugin-datalabels/issues/10
- https://github.com/apertureless/vue-chartjs/issues/410
[JS fiddle ]
即使阅读了上面的信息,我也无法完成我的工作。
对于解决此问题的任何建议,我将不胜感激。谢谢! :)
我的部分代码如下:
<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>
Please check out the entire code here : https://codesandbox.io/embed/xy4x07q0o.
最佳答案
您需要将选项绑定(bind)到pie-chart
<pie-chart v-if="isHidden" :data="chartData" :options="options"></pie-chart>
关于vue.js - 无法在 Vue 中应用 datalabels chartjs 插件的选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56141935/