Apexcharts 没有在工具提示中显示正确的 x 值
Apexcharts doesn't show correct value of x in tooltip
我正在尝试呈现一个折线图,工具提示中显示类别名称。
我得到了以下折线图:
let dataCurrent = [
{'x': 'FIRST', 'y': 711}, {'x': 'SECOND', 'y': 709}, {'x': 'THIRD', 'y': 522}
]
let options = {
chart: {
type: "line",
fontFamily: 'inherit',
height: 150.0,
sparkline: {
enabled: true
},
animations: {
enabled: true
},
},
tooltip: {
enabled: true,
onDatasetHover: {
highlightDataSeries: true,
},
x: {
show: true,
formatter: function (value) {
console.log(value) // This value should be "FIRST", "SECOND" and "THIRD", but it's 1, 2 and 3
return value;
},
},
y: {
formatter: function (val) {
return Math.floor(val)
}
}
},
dataLabels: {
enable: true,
position: 'bottom'
},
fill: {
opacity: 1,
},
stroke: {
width: [2, 1],
dashArray: [0, 3],
lineCap: "round",
curve: "smooth",
},
series: [{
name: dataCurrentName,
data: dataCurrent
},
grid: {
strokeDashArray: 4,
},
xaxis: {
labels: {
formatter: function (value) {
console.log(value) // This shows the correct category name
return value;
},
},
tooltip: {
enabled: false,
},
type: "category",
},
yaxis: {
labels: {
padding: 4
},
},
colors: [primaryColor, secondaryColor],
legend: {
show: false,
position: 'top',
offsetY: -3
},
};
let chart = new ApexCharts(document.querySelector("#line-chart"), options);
chart.render();
由于某些原因,x 轴的工具提示不显示 dataCurrent 中 x 的值。它显示序号(1、2、3),无论类别名称是什么。
如果我在 xaxis
中记录 x 的值,它会显示正确的值。我做错了什么?
目前,您仅将值解析为工具提示格式化程序。请参阅 documentation 以了解可在此格式化程序中解析的可用变量。您可以在下面找到一个工作示例,其中 categoryLabel 显示在工具提示中。
请注意,您的代码中也存在一些语法错误。我在下面的工作示例中对它们进行了评论。
如果您想查看所有可用的变量以解析到格式化程序中,您可以改用下面的函数:
formatter: function (value, { series, seriesIndex, dataPointIndex, w }) {
console.log(
"value:", value + '\n' +
"series:", series + '\n' +
"seriesIndex:", seriesIndex + '\n' +
"dataPointIndex:", dataPointIndex + '\n' +
"w:", w
);
console.log(w.globals.categoryLabels[value - 1]);
return w.globals.categoryLabels[value - 1]
},
//https://apexcharts.com/docs/options/tooltip/
let dataCurrent = [
{
'x': 'FIRST',
'y': 711
},
{
'x': 'SECOND',
'y': 709
},
{
'x': 'THIRD',
'y': 522
},
]
let options = {
chart: {
type: "line",
fontFamily: 'inherit',
height: 150.0,
sparkline: {
enabled: true
},
animations: {
enabled: true
},
},
tooltip: {
enabled: true,
onDatasetHover: {
highlightDataSeries: true,
},
x: {
show: true,
formatter: function (value, { w }) {
// Please refer to documentation, available options are: value, series, seriesIndex, dataPointIndex, w, categoryLabels
console.log(w.globals.categoryLabels[value - 1]);
return w.globals.categoryLabels[value - 1]
},
},
y: {
formatter: function (val) {
return Math.floor(val)
}
}
},
dataLabels: {
enable: true,
position: 'bottom'
},
fill: {
opacity: 1,
},
stroke: {
width: [2, 1],
dashArray: [0, 3],
lineCap: "round",
curve: "smooth",
},
series: [{
// name: dataCurrentName, // ---> ReferenceError: dataCurrentName is not defined
data: dataCurrent
}],
grid: {
strokeDashArray: 4,
},
xaxis: {
labels: {
formatter: function (value) {
console.log(value) // This shows the correct category name
return value;
},
},
tooltip: {
enabled: false,
},
type: "category",
},
yaxis: {
labels: {
padding: 4
},
},
// colors: [primaryColor, secondaryColor], // ---> ReferenceError: primaryColor is not defined
legend: {
show: false,
position: 'top',
offsetY: -3
},
};
let chart = new ApexCharts(document.querySelector("#line-chart"), options);
chart.render();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="style.css"> -->
<title>Test</title>
</head>
<body>
<div id="line-chart"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</html>
我正在尝试呈现一个折线图,工具提示中显示类别名称。 我得到了以下折线图:
let dataCurrent = [
{'x': 'FIRST', 'y': 711}, {'x': 'SECOND', 'y': 709}, {'x': 'THIRD', 'y': 522}
]
let options = {
chart: {
type: "line",
fontFamily: 'inherit',
height: 150.0,
sparkline: {
enabled: true
},
animations: {
enabled: true
},
},
tooltip: {
enabled: true,
onDatasetHover: {
highlightDataSeries: true,
},
x: {
show: true,
formatter: function (value) {
console.log(value) // This value should be "FIRST", "SECOND" and "THIRD", but it's 1, 2 and 3
return value;
},
},
y: {
formatter: function (val) {
return Math.floor(val)
}
}
},
dataLabels: {
enable: true,
position: 'bottom'
},
fill: {
opacity: 1,
},
stroke: {
width: [2, 1],
dashArray: [0, 3],
lineCap: "round",
curve: "smooth",
},
series: [{
name: dataCurrentName,
data: dataCurrent
},
grid: {
strokeDashArray: 4,
},
xaxis: {
labels: {
formatter: function (value) {
console.log(value) // This shows the correct category name
return value;
},
},
tooltip: {
enabled: false,
},
type: "category",
},
yaxis: {
labels: {
padding: 4
},
},
colors: [primaryColor, secondaryColor],
legend: {
show: false,
position: 'top',
offsetY: -3
},
};
let chart = new ApexCharts(document.querySelector("#line-chart"), options);
chart.render();
由于某些原因,x 轴的工具提示不显示 dataCurrent 中 x 的值。它显示序号(1、2、3),无论类别名称是什么。
如果我在 xaxis
中记录 x 的值,它会显示正确的值。我做错了什么?
目前,您仅将值解析为工具提示格式化程序。请参阅 documentation 以了解可在此格式化程序中解析的可用变量。您可以在下面找到一个工作示例,其中 categoryLabel 显示在工具提示中。
请注意,您的代码中也存在一些语法错误。我在下面的工作示例中对它们进行了评论。
如果您想查看所有可用的变量以解析到格式化程序中,您可以改用下面的函数:
formatter: function (value, { series, seriesIndex, dataPointIndex, w }) {
console.log(
"value:", value + '\n' +
"series:", series + '\n' +
"seriesIndex:", seriesIndex + '\n' +
"dataPointIndex:", dataPointIndex + '\n' +
"w:", w
);
console.log(w.globals.categoryLabels[value - 1]);
return w.globals.categoryLabels[value - 1]
},
//https://apexcharts.com/docs/options/tooltip/
let dataCurrent = [
{
'x': 'FIRST',
'y': 711
},
{
'x': 'SECOND',
'y': 709
},
{
'x': 'THIRD',
'y': 522
},
]
let options = {
chart: {
type: "line",
fontFamily: 'inherit',
height: 150.0,
sparkline: {
enabled: true
},
animations: {
enabled: true
},
},
tooltip: {
enabled: true,
onDatasetHover: {
highlightDataSeries: true,
},
x: {
show: true,
formatter: function (value, { w }) {
// Please refer to documentation, available options are: value, series, seriesIndex, dataPointIndex, w, categoryLabels
console.log(w.globals.categoryLabels[value - 1]);
return w.globals.categoryLabels[value - 1]
},
},
y: {
formatter: function (val) {
return Math.floor(val)
}
}
},
dataLabels: {
enable: true,
position: 'bottom'
},
fill: {
opacity: 1,
},
stroke: {
width: [2, 1],
dashArray: [0, 3],
lineCap: "round",
curve: "smooth",
},
series: [{
// name: dataCurrentName, // ---> ReferenceError: dataCurrentName is not defined
data: dataCurrent
}],
grid: {
strokeDashArray: 4,
},
xaxis: {
labels: {
formatter: function (value) {
console.log(value) // This shows the correct category name
return value;
},
},
tooltip: {
enabled: false,
},
type: "category",
},
yaxis: {
labels: {
padding: 4
},
},
// colors: [primaryColor, secondaryColor], // ---> ReferenceError: primaryColor is not defined
legend: {
show: false,
position: 'top',
offsetY: -3
},
};
let chart = new ApexCharts(document.querySelector("#line-chart"), options);
chart.render();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="style.css"> -->
<title>Test</title>
</head>
<body>
<div id="line-chart"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</html>