React Apex Chart 的折线图在自定义工具提示中返回 [object Object]

问题描述

我正在使用 React Apex Chart 显示折线图。

我必须更改图表中的默认工具提示显示，如下面的第一张图片所示。

但是当我尝试按照 this documentation 更改工具提示显示时，我从工具提示中返回了 [object Object]，如下面的第二张图片所示。

所以我的问题是代码的用途：

1. 更改所选 Y 值的工具提示显示（上橙色箭头）
2. 并移除 X 轴的工具提示显示（底部橙色箭头）？

设计：

实际图片：

代码如下：

图表.js

import React from 'react'

import ReactApexChart from "react-apexcharts"

const Chart = () => {
    const xList = ['ABC-001','ABC-002','ABC-003','ABC-004','ABC-005']
    const yList = [20.3,20.1,30.6,10.5,40.2]

    const chartSeries = [
        {
            name: "Fuel Usage",data: yList
        }
    ]

    const chartOptions = {
        chart: { toolbar: "false" },dataLabels: { enabled: !1 },stroke: { curve: "smooth",width: 2 },markers: { size: 0,style: "hollow" },xaxis: {
            categories: xList
        },tooltip: {
            custom: function({series,seriesIndex,dataPointIndex,w}) {
                return (
                    <div>
                        <p>{series[seriesIndex][dataPointIndex]}</p>
                    </div>
                )
            },// x: {
            //     show: false
            // }
        },colors: ["#4D96F5"],fill: {
            type: "gradient",gradient: {
                shadeIntensity: 1,opacityFrom: 0.4,opacityTo: 0.05,stops: [50,100,100],},}

    return(
        <ReactApexChart
            options={chartOptions}
            series={chartSeries}
            type="area"
            height={400}
        />
    )
}

export default Chart

环境版本：

react-apexcharts: 1.3.7
react: 17.0.2
npm: 6.14.8
node: 12.19.0

更新

我在工具提示属性中实现了 HTML 字符串，如下所示：

tooltip: {
    custom: function({series,w}) {
        return 
            '<div>' +
                '<span>' + 'Device Name: ' + xList[dataPointIndex] + '</span>' +
                '<span>' + 'Fuel Usage: ' + series[seriesIndex][dataPointIndex] + '</span>' +
            '</div>'
        
    },// x: {
    //     show: false
    // }
},

但我遇到了不同的结果（工具提示返回 undefined），如下图所示：

你可以在这里玩代码https://codesandbox.io/s/apexchart-rfin2

解决方法

用以下代码替换您的工具提示功能。你得到一个 [object,object] 因为这个工具提示函数不是一个 JSX 元素。

 tooltip: {
      custom: function ({ series,seriesIndex,dataPointIndex,w }) {
        debugger;
        let data=` <div>
        <p>${series[seriesIndex][dataPointIndex]}</p>
      </div>`
        return (data);
      }
      // x: {
      //     show: false
      // }
    },

这是一个有效的 sample。

,

您的自定义工具提示函数正在返回 JSX，Babel 将其转换为 React 组件（反过来是 JavaScript 对象）。根据 Apex custom tooltip docs，该函数应返回一个 HTML 字符串，因此请尝试将其更改为：

tooltip: {
        custom: function({series,w}) {
            return (
                '<div>' +
                    '<p>' + series[seriesIndex][dataPointIndex] + '</p>' +
                '</div>'
            )
        }
    }