[英]how to disable download option on apexcharts?
我正在使用apexcharts vue 綁定來繪制一些條形圖。
正如文檔所說,應該可以通過 set show:false as seen there來禁用工具欄。
所以我在我的輔助函數上做到了:
// do-char-options.js
const randomColor = require("randomcolor");
module.exports = labels => ({
toolbar: { show:false },// docs says it should do the trick
colors: randomColor({
luminosity: "light",
hue: "blue",
count: 30
}),
plotOptions: {
bar: { distributed: true, horizontal: true }
},
tooltip: {
theme: "dark"
},
xaxis: {
categories: labels,
color: "white",
labels: {
style: {
colors: ["white"]
}
}
},
yaxis: {
labels: {
style: {
color: "white"
}
}
}
});
我通過這種方式將它傳遞給我的 vue 組件:
<template>
<v-layout row justify-center wrap>
<v-flex xs12>
<apexchart type="bar" height="500" :options="chartOptions" :series="series"/>
</v-flex>
</v-layout>
</template>
<script>
const doOptions = require("./do-chart-options");
const labels = [
"Javascript",
"Java",
"SQL",
"HTML",
"CSS",
"C",
"C++",
"PHP",
"Python",
"GO",
"Ruby"
];
module.exports = {
name: "chart-languages",
data: _ => ({
series: [{ data: [160, 110, 90, 85, 80, 80, 60, 30, 15, 14, 9] }],
chartOptions: doOptions(labels)
})
};
</script>
但是菜單仍然存在:
歡迎任何指導。
toolbar
應該在chart
鍵下
{
chart: {
toolbar: {
show: false
}
},
colors: randomColor({
luminosity: "light",
hue: "blue",
count: 30
}),
plotOptions: {
bar: {
distributed: true,
horizontal: true
}
},
...
}
你可以在這里查看我的演示
chart: {
toolbar: {
show: true,
tools:{
download:false // <== line to add
}
}
}
只能禁用下載選項,但工具欄存在
使用 CSS 從下載部分隱藏選項。
/* hide the Download CSV */
<style lang="scss" scoped>
::v-deep .apexcharts-menu-item.exportCSV {
display: none;
}
</style>
編輯此行可能會對您有所幫助
{chart: {toolbar: {show: false
}},
colors: randomColor({
luminosity: "light",
hue: "blue",
count: 30
}),
plotOptions: {
bar: {
distributed: true,
horizontal: true
}
},
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.