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

Posted 2023-05-07

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

【英文标题】：Line chart from React Apex Chart returns [object Object] in custom tooltip

【发布时间】：2021-09-11 07:12:21

【问题描述】：

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

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

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

所以我的问题是什么代码：

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

设计：

实际图片：

代码如下：

Chart.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, 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

更新

我已经在 tooltip 属性中实现了 html 字符串，如下所示：

tooltip: 
    custom: function(series, seriesIndex, dataPointIndex, 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

【问题讨论】：

你能分享一下小提琴吗？

对不起，我没有小提琴，但您可以将上面的所有源代码复制并粘贴到小提琴中。

在一些 fiddle 或 sn-p 中分享您的代码，以便我们对其进行调查。

这里是codesandbox.io/s/apexchart-rfin2

【参考方案1】：

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

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

【讨论】：

感谢您的评论。我已经使用 HTML 字符串实现了，但也失败了。我会尽快更新问题。

【参考方案2】：

用以下代码替换您的工具提示功能。你得到一个 [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。

【讨论】：

感谢您的回答。那么如何移除/隐藏x轴的tooltip（如上图底部橙色箭头所示）？

【参考方案3】：

import ReactDOMServer from 'react-dom/server';
    
tooltip: 
  custom: () => ReactDomServer.renderToStaticMarkup(<ATooltipOfYourOwn />) 

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：***.com/help/how-to-answer。祝你好运?