我正在将 Apexcharts 的简单圆环图导入我的 Vue.js 项目,但是,即使遵循了他们 site 上提供的文档,图例标题保持为“系列 1,系列 2,...”。
这是渲染的图片:Donut Chart
如您所见,我正在关注文档,添加 series
和 labels
到数据对象和 div
元素,但由于某种原因仍然无法呈现正确的标签。
我将如何解决这个问题?
旁注:切换 legend.show
从假到真什么都不做。
<div id="donut-chart">
<v-container>
<div id="chart">
<apexchart
type=donut
width=380
:options="chartOptions"
:labels="labels"
:series="series" />
</div>
</v-container>
</div>
import VueApexCharts from 'vue-apexcharts'
export default {
name: 'donut-chart',
data: () => ({
series: [23, 11, 54, 72, 12],
labels: ["Apple", "Mango", "Banana", "Papaya", "Orange"],
chartOptions: {
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
show: false
}
}
}],
legend: {
position: 'right',
offsetY: 0,
height: 230
}
}
}),
components: {
apexchart: VueApexCharts,
}
}
最佳答案
labels
属性应该是 chartOptions
的嵌套属性, 不能作为单独的 Prop 传递。
chartOptions: {
labels: ["Apple", "Mango", "Banana", "Papaya", "Orange"],
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
show: false
}
}
}],
legend: {
position: 'right',
offsetY: 0,
height: 230
}
}
<apexchart
type=donut
width=380
:options="chartOptions"
:series="series" />
关于vue.js - ApexCharts 圆环图图例标题未反射(reflect)提供的数据标签(卡住为 'series-1' 等),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55225907/