We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[{"date":1605789000000,"high":"14961.06","low":"14945.55","open":"14949.07","close":"14957.26","vol":"239430.4543178","rece":"14957.26","price":"14957.26"}, ......]
import React, { useEffect, useState } from 'react' import { Chart } from '@antv/g2' import dayjs from 'dayjs' export default function KLine ({posCoinDetail, defaultTime}) { const [loading, setLoading] = useState(false) useEffect(() => { setLoading(true) let dom = document.getElementById('kline-container') dom.innerHTML = null fetch(`API_URL`) .then(res => res.json()) .then(r => { setLoading(false) const chart = new Chart({ container: 'kline-container', autoFit: true, height: 380, padding: [50, 20, 25, 0] }); let data = r.data.reverse() chart.changeData(data); chart.tooltip({ showCrosshairs: true, // 展示 Tooltip 辅助线 showMarkers: false, shared: true, showTitle: false, itemTpl: "<li><span style='line-height: 16px; font-size: 16px; display: inline-block; margin-bottom: 10px;'>{price}</span><br/><span>{date}</span></li>", domStyles: { 'g2-tooltip': { background: "rgba(0, 0, 0, 0.705064)", borderRadius: 4, color: "#fff" }, 'g2-tooltip-list-item': { fontSize: "20px" } } }); chart.legend({ position: 'top' }) chart.axis(false) chart.line().position('date*price').color("#225cff").tooltip('date*price', (date, price) => { return { date: dayjs(date).format('MMM DD, YYYY'), price: `€${Number(price).toFixed(2)}` } }) chart.area().position('date*price').color("l(90) .1:#225cff 1:#fff") chart.render(); }) }, [defaultTime, posCoinDetail]) const Loading = () => ( <div className='loading'> <img src={loading_gif} alt="loading" /> </div> ) return ( <div> {loading && <Loading/>} <div id="kline-container"></div> </div> ) }
The text was updated successfully, but these errors were encountered:
要看具体出现直线之后的,数据是什么样的~ 是否可以贴一下完整的可复现的代码,或者 live demo,方便我来调试和修复。
Sorry, something went wrong.
No branches or pull requests
正常的图表
页面上有一些时间间隔切换的交互然后根据选中的时间间隔去请求 API 但是偶尔图表绘制的时候就会出现以下情况:
我请求回来的数据是这样的:
我的代码:
The text was updated successfully, but these errors were encountered: