我正在尝试在 Y 值后的Apexcharts tooltip中添加%。我正在使用{strong> apexchart 尚未提供官方文档的vue.js
。但我知道它能正常工作。这是我到目前为止的内容:
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
答案 0 :(得分:1)
似乎您已将yaxis选项与工具提示标签格式化程序属性混合在一起。
尝试以下代码
tooltip: {
x: {
format: 'dd MMM',
formatter: undefined,
},
y: {
formatter: (value) => { return value + "%" },
},
}
此外,还有可以用于ApexCharts的vue.js包装器。