无法在 Vue 中应用 datalabels chartjs 插件的选项
Can't apply options of datalabels chartjs plugin in Vue
我尝试在 Vue 到 vue-chartjs
中使用 Chart.js
。另外,我使用了 [chartjs-plugin-datalabels][1]
。目前,我可以通过单击 "Show a chart" 按钮来切换图表。
我可以看到图表中每个标签的值。但是,我无法自定义数据标签。
[Whosebug]
[插件的 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.
您需要将选项绑定到 pie-chart
<pie-chart v-if="isHidden" :data="chartData" :options="options"></pie-chart>
我尝试在 Vue 到 vue-chartjs
中使用 Chart.js
。另外,我使用了 [chartjs-plugin-datalabels][1]
。目前,我可以通过单击 "Show a chart" 按钮来切换图表。
我可以看到图表中每个标签的值。但是,我无法自定义数据标签。
[Whosebug]
[插件的 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.
您需要将选项绑定到 pie-chart
<pie-chart v-if="isHidden" :data="chartData" :options="options"></pie-chart>