BizCharts 关于ToolTip配置出现undefined

ia2d9nvy  于 4个月前  发布在  其他
关注(0)|答案(1)|浏览(49)

BizCharts Version:4.0.16
Platform:win10

双Y轴显示数据,配置ToolTip出现问题。

不配置ToolTip,能正常显示,如图一所示:

现在我想要给ToolTip上的数据加上单位,因此对ToolTip进行了配置,但是ToolTip中出现了undefined的数据,明明总共只有9种类型的数据但是出现了多余的undefined,如图二所示:

下述为demo代码,其中data原数据太多,但是总共分为这九种类别,不知道这个问题出在哪里,为什么会出现undefined。希望大佬解答一下,谢谢!

`
import React, { Component} from 'react';
import { Card, Row, Col } from 'antd';
import {
G2,
Chart,
GaugeChart,
Geom,
Axis,
Tooltip,
Coord,
Label,
Legend,
Annotation,
Facet,
Util,
Slider,
LineChart,
LineAdvance,
Line,
Point
} from "bizcharts";

const demo:React.FC=()=>{
const data = [
{
Time: "2020-12-22 17:42:40",
colorByte: "dm-0 read",
valueByte: 23,
},
{
Time: "2020-12-22 17:42:40",
colorByte: "sr0 read",
valueByte: 16,
},
{
Time: "2020-12-22 17:42:40",
colorByte: "sda read",
valueByte: 16,
},
{
Time: "2020-12-22 17:42:40",
colorByte: "dm-0 written",
valueByte: 34,
},
{
Time: "2020-12-22 17:42:40",
colorByte: "sr0 written",
valueByte: 34,
},
{
Time: "2020-12-22 17:42:40",
colorByte: "sda written",
valueByte: 34,
},
{
Time: "2020-12-22 17:42:40",
colorByte: "dm-0 io time",
valueByte: 0,
},
{
Time: "2020-12-22 17:42:40",
colorByte: "sr0 io time",
valueMs: 0,
},
{
Time: "2020-12-22 17:42:40",
colorByte: "sda io time",
valueMs: 0,
},
]

//控制双轴对齐
        const doubleYscale = {
            valueByte:{
                min:0,
                // nice:true,
                tickCount:6
            },
            valueMs:{
                min:0,
                // nice:true,
                tickCount:6
            },
            Time:{
                type:'time',
                nice:true,  
                mask:'HH:mm:ss',
                range:[0.05,0.95] 
            }

        }  

        const xlabel_IO:any = {
            rotate: Math.PI / 5, 
            style: {
              textAlign:'start' ,
            },
        }
    
        const ylabelByte_IO:any = {
            formatter(text:any,item:any,index:any){
                return `${text}GiB`
            }
        }

        const ylabelMs_IO:any = {
            formatter(text:any,item:any,index:any){
                return `${text}ms`
            }
        }

return(
    <>
    <Card title='demo'>
        <Chart
                data={data} 
                placeholder={true}  
                scale={doubleYscale}
                autoFit
                height={400}
        >
                <Axis name='Time' label={xlabel_IO}/>
                <Axis name='valueByte' label={ylabelByte_IO}/>
                <Axis name='valueMs' label={ylabelMs_IO}/>

                <Tooltip shared showCrosshairs />

                <Line
                    ara
                    position="Time*valueByte"
                    color="colorByte"
                    shape="smooth" 
                    tooltip={[                                                               //配置ToolTip
                        "Time*valueByte*colorByte",
                        (Time, valueByte,colorByte) => {
                            const myTitle = Time;
                            return {
                            name: `${colorByte}`,
                            value: `${valueByte} KiB`,
                            title: myTitle,
                            };
                        },
                        ]}

                />

                <Line
                    ara
                    position="Time*valueMs"
                    color="colorMs"
                    shape="smooth"   
                    tooltip={[                                                             //配置ToolTip
                        "Time*valueMs*colorMs",
                        (Time, valueMs,colorMs) => {
                            const myTitle = Time;
                            return {
                            name: `${colorMs}`,
                            value: `${valueMs} ms`,
                            title: myTitle,
                            };
                        },
                        ]}                          
                />
            </Chart>      
        </Card>
    </>
)

}

export default demo
`

ep6jt1vc

ep6jt1vc1#

请使用官网的demo系统forck一个demo还原。方便查看和留存代码

相关问题