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
`
1条答案
按热度按时间ep6jt1vc1#
请使用官网的demo系统forck一个demo还原。方便查看和留存代码