如何解决具有React的Chartjs:在带有竖线的图表之间切换
我已经在我的React应用程序中创建了一个折线图,用户可以使用一些按钮在要在该图表上显示的不同数据之间进行切换。直到我决定在悬停上应用一条垂直线(显示工具提示)之前,这一切都很好。当第一个图表(默认为30d)呈现时,我没有问题,但是当我在不同的图表之间切换并将鼠标悬停在它们上并移动鼠标时,显示的图表会在不同的图表之间快速切换,就像鼠标悬停以某种方式执行一样determineTimeFormat()
函数。
const CoinChart = ({ coinData }) => {
const classes = useStyles();
const chartRef = useRef();
const [timeFormat,setTimeFormat] = useState('30d');
const [activeButton,setActiveButton] = useState('30d');
const { day,month,year,all,basicInfo } = coinData;
const determineTimeFormat = () => {
switch (timeFormat) {
case '24h':
return day;
case '30d':
return month;
case '1y':
return year;
case 'All':
return all;
default:
return day;
}
};
const handleChartButtonClick = (e) => {
setTimeFormat(e.target.value);
setActiveButton(e.target.value);
};
const determineBorderColor = () => {
const firstPrice = determineTimeFormat()[0]['y'];
const lastPrice = determineTimeFormat()[determineTimeFormat().length - 1][
'y'
];
if (lastPrice >= firstPrice) {
return globalStyles.profitColor.color;
} else {
return globalStyles.lossColor.color;
}
};
useEffect(() => {
if (chartRef && chartRef.current && basicInfo) {
Chartjs.defaults.LineWithLine = Chartjs.defaults.line;
Chartjs.controllers.LineWithLine = Chartjs.controllers.line.extend({
draw: function (ease) {
Chartjs.controllers.line.prototype.draw.call(this,ease);
if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
const activePoint = this.chart.tooltip._active[0],ctx = this.chart.ctx,x = activePoint.tooltipPosition().x,topY = this.chart.legend.bottom,bottomY = this.chart.chartArea.bottom;
// draw line
ctx.save();
ctx.beginPath();
ctx.moveto(x,topY);
ctx.lineto(x,bottomY);
ctx.linewidth = 2;
ctx.strokeStyle = '#07C';
ctx.stroke();
ctx.restore();
}
},});
var chartInstance = new Chartjs(chartRef.current,{
type: 'LineWithLine',data: {
datasets: [
{
label: 'Price',data: determineTimeFormat(),borderColor: determineBorderColor(),poinTradius: 0,fill: false,},],options: {
lineHeightAnnotation: {
always: true,hover: true,lineWeight: 1.5,animation: {
duration: 1500,maintainAspectRatio: false,responsive: true,tooltips: {
intersect: false,scales: {
xAxes: [
{
type: 'time',distribution: 'linear',gridLines: {
display: false,});
}
},[timeFormat]);
return (
<div style={{ width: '100%' }}>
<div className={classes.chartButtonsContainer}>
<button
type='button'
className={classes.chartButton}
disabled={activeButton === '24h' ? true : false}
value='24h'
onClick={handleChartButtonClick}
>
24h
</button>
<button
type='button'
className={classes.chartButton}
disabled={activeButton === '30d' ? true : false}
value='30d'
onClick={handleChartButtonClick}
>
30d
</button>
<button
type='button'
className={classes.chartButton}
disabled={activeButton === '1y' ? true : false}
value='1y'
onClick={handleChartButtonClick}
>
1y
</button>
<button
type='button'
className={classes.chartButton}
disabled={activeButton === 'All' ? true : false}
value='All'
onClick={handleChartButtonClick}
>
All
</button>
</div>
<div className={classes.chartInnerContainer}>
<canvas ref={chartRef} id='history-chart'></canvas>
</div>
</div>
);
};
export default CoinChart;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。