0

我正在使用 react-vis 制作一个简单的数据可视化工具，但我不知道如何使十字准线仅显示最近鼠标悬停系列的 y 值。此外，我似乎找不到任何有关 react-vis 文档中指定的事件对象的文档。例如：

<LineSeries
    ...
  onSeriesMouseOver={(event)=>{
      // does something on mouse over
      // you can access the value of the event
  }}

事件有什么属性？我在这方面找不到任何东西。

这是我目前拥有的 Chart 组件的代码。我尝试将每个系列的选定状态存储在一个数组中（当前已注释掉），并且仅在所述系列的状态为真时将十字准线值设置为该系列：

import React from 'react';
import {XYPlot, XAxis, YAxis, VerticalGridLines, HorizontalGridLines, 
    LineSeries, DiscreteColorLegend, Crosshair} from 'react-vis';

function hslToHex(h, s, l) {
    h /= 360;
    s /= 255;
    l /= 255;
    let r, g, b;
    if (s === 0) {
        r = g = b = l; // achromatic
    } 
    else {
        const hue2rgb = (p, q, t) => {
            if (t < 0) t += 1;
            if (t > 1) t -= 1;
            if (t < 1 / 6) return p + (q - p) * 6 * t;
            if (t < 1 / 2) return q;
            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
            return p;
        };
        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        const p = 2 * l - q;
        r = hue2rgb(p, q, h + 1 / 3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1 / 3);
    }
    const toHex = x => {
        const hex = Math.round(x * 255).toString(16);
        return hex.length === 1 ? '0' + hex : hex;
    };
    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}
const series = [];
const invisiSeries = [];
const seriesColor = [];
const Chart = (props) => {

    const [crossVals, setCrossVals] = React.useState([]);
    const dataArr = [];
    for (var i = 0; i < props.data.length; i++) {
        dataArr.push(props.data[i].map((d)=> {
            return {x: d.TIME, y: d.Value};
        }));
    }
    const seriesNames = props.items.map(e => {
        return e.LOCATION + ' ' + e.SUBJECT; 
    });
    const isSelected = Array(dataArr.length).fill(false);

    for (i = 0; i < dataArr.length; i++) {
        if (seriesColor.length <= i) {
            seriesColor.push(hslToHex( (i * 360 * 3/10) % 360, 255, 128));
        }
        series.push(<LineSeries
            data={dataArr[i]}
            style={{stroke: seriesColor[i], strokeWidth: 3}}
            /*
            onSeriesMouseOver={(d) => {
                isSelected.fill(false);
                isSelected[i] = true;
            }}
            onSeriesMouseOut={(event)=>{
                isSelected[i] = false;
            }}
            */
            onNearestX={(value, {index}) => {
                // Tried only setting crossvals for the single LineSeries that has
                // its isSelected[i] set to true
                //if(isSelected[i] == true) {
                //  setCrossVals([d]));
                //}
                setCrossVals(dataArr.map(d => d[index]));
            }}/>);
        /*invisiSeries.push(<LineSeries
            data={dataArr[i]}
            style={{opacity: 0, strokeWidth: 10}}
            onNearestX={v => {
                setCrossVals([v]);
            }}/>);
            */
    }
    return (
        <div>
            <XYPlot
                xType="ordinal"
                width={1000}
                height={500}
                onMouseLeave={() => {setCrossVals([])}}>
                <VerticalGridLines />
                <HorizontalGridLines />
                <XAxis title="Year" tickLabelAngle={35} tickPadding={24}/>
                <YAxis title="KG per Capita" />
                    {series}
                <Crosshair values={crossVals}>
                </Crosshair>
            </XYPlot>
            <DiscreteColorLegend height={200} width={300} 
                items={props.items.map(e => {
                    return {title: e.LOCATION + ' ' + e.SUBJECT,
                    color: seriesColor[e.INDEX],
                    strokeWidth: 3}})} />
        </div>
    );
}
export default Chart;
4

1 回答 1

0

嗨，检查我在这个问题中的答案。我用它来显示当前悬停的条的 X、Y 值，VerticalBarseries我希望它也能正常工作LineSeries。

于 2020-05-18T11:37:45.237 回答