gpt4 book ai didi

javascript - Apexchart 工具提示

转载 作者:行者123 更新时间:2023-11-28 17:24:18 28 4
gpt4 key购买 nike

我正在尝试在我的 Apexcharts tooltip 中添加 %Y值之后。我正在使用 vue.jsapexchart 没有提供官方文档。但我让它正常工作。这是我到目前为止所拥有的:

data: function () {
return {
apex: null
}
},

// this is the code that handles the chart, there is no official documentation for apexcharts with vue.js but there is with javascript
//https://apexcharts.com/docs/installation/
methods: {
init: function() {
this.apex = new ApexCharts(this.$refs.barchart, {
chart: {
type: 'line',//defines the type of chart
height:400,
animations: {
enabled: true,
easing: 'easeinout',
speed: 800,
animateGradually: {
enabled: true,
delay: 50
},
dynamicAnimation: {
enabled: true,
speed: 800
}
},
toolbar: {
show: true,
tools: {
download: true,
selection: false,
zoom: false,
zoomin: true,
zoomout: true,
pan: true,
reset: true
},
autoSelected: 'zoom'
},
},
stroke: {
width: 3, //thickness of the lines
curve: 'smooth'//roundness of the lines
},
series: [{
name: this.bar1name,
data: [28 , 29, 33, 30, 26, this.bar1number2, this.bar1number1]//the last 2 variables are tied to the bars, try changing the variable above at their source
},
{
name: this.bar2name,
data: [12, 11, 14, 26, 28, this.bar2number2, this.bar2number1]
},
{
name: this.bar3name,
data: [32, 41, 40, 44, 47, this.bar3number2, this.bar3number1]
},
{
name: this.bar4name,
data: [48, 41, 33, 37, 35, this.bar4number2, this.bar4number1]
},
{
name: this.bar5name,
data: [52, 56, 60, 54, 52, this.bar5number2, this.bar5number1]
},
{
name: this.bar6name,
data: [32, 27, 38, 48, 30, this.bar6number2, this.bar6number1]
}],
colors:[this.chart1color, this.chart2color, this.chart3color,this.chart4color,this.chart5color,this.chart6color], //line color
markers: {
colors: [this.chart1color, this.chart2color, this.chart3color,this.chart4color,this.chart5color,this.chart6color], //dot color
hover:{size:6} //dot size
},
xaxis: {
type:'datetime',
categories: ['Jan 2018', 'Feb 2018', 'Mar 2018', 'Apr 2018', 'May 2018', 'Jun 2018', 'Jul 2018'],
axisTicks: {
show: true,
borderType: 'solid',
color: '#78909C',
height: 6,
},
},
yaxis: {
tickAmount: 5,
min: 0,
max: 100,//sets the max to the y axis
},
grid: {
show: true,
borderColor: '#e8e8e8',
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: true,
offsetX: 10,
offsetY: 10,
}
},
yaxis: {
lines: {
show: true,
offsetX: 10,
offsetY: 10
},
tickAmount: 6,
min: 0,
max: 100,
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},

},
tooltip: {
enabled: true,
followCursor: true,
x: {
format: 'dd MMM',
formatter: undefined,
},

yaxis: {
labels: {
formatter: (value) => { return val + "%" },
},
},

},

}).render()
}
},
mounted() {
this.init();//mounted makes the chart apear
},
updated() {
this.init();//updated updates the chart after every change
}
}

我尝试使用格式化程序来更改这样的结果,但它似乎不起作用。

tooltip: {
enabled: true,
followCursor: true,
x: {
format: 'dd MMM',
formatter: undefined,
},

yaxis: {
labels: {
formatter: (value) => { return val + "%" },
},
},
},

非常感谢任何帮助或引用,谢谢。

堆栈也不允许我为顶点图表发布新标签,因此这是官方文档。 Apexcharts

最佳答案

似乎您已将 yaxis 的选项与工具提示标签格式化程序属性混合在一起。

尝试以下代码

tooltip: {
x: {
format: 'dd MMM',
formatter: undefined,
},
y: {
formatter: (value) => { return value + "%" },
},
}

此外,您还可以使用适用于 ApexCharts 的 vue.js 包装器。

https://github.com/apexcharts/vue-apexcharts

关于javascript - Apexchart 工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51950683/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com