Antv-G2中数据更新但是不展示或者创建一个新的没有销毁原有的Chart问题

这边我的数据传递是通过父穿子数据来更新chart图标,在同一个模块用接口获取数据同理

是通过对g2可视化的挂在和current属性来判断是否需要destroy操作


import { Chart } from '@antv/g2'

import React, { useEffect,useRef } from 'react'
const Temperature = (props) => {
  
  const {data}= props
  //重点
  const chart = useRef()
  
  useEffect(() => {
//判断是否有数据传递过来进行刷新
    if(data){
      getChart(data)
    }
  }, [data])
  useEffect(()=>{
    return () => {
      if(chart.current){
        chart.current.destroy()
      }
    }
  },[])

   const getChart =(data)=>{
    if(!chart.current){
        chart.current = new Chart({
        container: 'temperature',
        autoFit: true,
        height: 180,
        width: 480,
        // width: 'auto',
      })
    }
  const {current:_chart} = chart
    _chart.clear()
    _chart.data(data)
//下方配置就看个人需求,主要是改的是上面部分代码
    _chart.scale('value', {
      alias: 'mg/m³',
      nice: true,
    })
    _chart.scale({
      date: {
        nice: true,
        range: [0, 1],
      },
      value: {
        // alias: '进入次数',
        // min: 2,
        // max: 6,
        sync: true, // 将 合格率 字段数值同 废品率 字段数值进行同步
        nice: true,
      },
    })

    _chart.axis('value', {
      grid: {
        line: {
          type: 'line',
          style: {
            // fill:'#ff0000',
            stroke: '#482daf ',
            // opacity:0.3,
            // lineDash:[1,3],//虚线
          },
        },
      },
      label: {
        style: {
          fill: '#fff', //文字颜色
          // fontFamily: "Microsoft YaHei",//文字字体
          fontWeight: 400, //文字粗细
          fontSize: 20, //文字大小
        },
        formatter: (text) => {
          return text + '℃'
        },
      },
      line: {
        style: {
          stroke: '#fff', //坐标轴颜色
        },
      },
    })
    _chart.axis('time', {
      grid: {
        line: {
          type: 'line',
          style: {
            // fill:'#ff0000',
            stroke: '#482daf ',
            // opacity:0.3,
            // lineDash:[1,3],//虚线
          },
        },
      },
      label: {
        style: {
          fill: '#fff', //文字颜色
          // fontFamily: "Microsoft YaHei",//文字字体
          // fontWeight: 400, //文字粗细
          marginTop: 10,
          fontSize: 20, //文字大小
        },
      },
      line: {
        style: {
          stroke: '#fff', //坐标轴颜色
        },
      },
    })

    _chart.tooltip({
      showMarkers: false,
    })
    _chart.line().shape('smooth').position('time*value').color('#01ffff')
    _chart.interaction('element-active')

    // 添加文本标注
    data.forEach((item) => {
      _chart.annotation().text({
        position: [item.time, item.value],
        content: item.value,
        style: {
          textAlign: 'center',
          fill: '#fff',
          fontSize: 20,
        },
        offsetY: -10,
      })
    })
    _chart.render()
    return _chart
   }


  return (
    <div>
      <div id="temperature"></div>
  
    </div>
  )
}

export default Temperature
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antv-g2,可以通过设置饼图的color字段来设置饼图的颜色。如果要设置颜色渐变,可以使用linear-gradient或radial-gradient等CSS渐变样式。具体步骤如下: 1. 在color字段使用一个渐变的CSS样式。例如: ```javascript const data = [ { type: '分类1', value: 27 }, { type: '分类2', value: 25 }, { type: '分类3', value: 18 }, { type: '分类4', value: 15 }, { type: '分类5', value: 10 }, { type: '分类6', value: 5 } ]; const chart = new G2.Chart({ container: 'container', forceFit: true, height: 500 }); chart.source(data); chart.coord('theta', { radius: 0.75 }); chart.intervalStack() .position('value') .color('type', [ 'linear-gradient(135deg, #c9dfdb 0%, #e3e7e9 100%)', 'linear-gradient(135deg, #a3dbd4 0%, #d5e1dd 100%)', 'linear-gradient(135deg, #69c2b0 0%, #a3dbd4 100%)', 'linear-gradient(135deg, #5fa8d3 0%, #8fc3e9 100%)', 'linear-gradient(135deg, #547ba4 0%, #8fc3e9 100%)', 'linear-gradient(135deg, #4b5c77 0%, #547ba4 100%)' ]) .label('type', { offset: -20 }) .style({ lineWidth: 1, stroke: '#fff' }); chart.render(); ``` 这个例子,使用了linear-gradient样式来设置饼图的颜色。其,每个颜色都是一个渐变的CSS样式,可以根据需要进行调整。 2. 在color字段使用一个回调函数,根据数据动态生成渐变样式。例如: ```javascript const data = [ { type: '分类1', value: 27 }, { type: '分类2', value: 25 }, { type: '分类3', value: 18 }, { type: '分类4', value: 15 }, { type: '分类5', value: 10 }, { type: '分类6', value: 5 } ]; const chart = new G2.Chart({ container: 'container', forceFit: true, height: 500 }); chart.source(data); chart.coord('theta', { radius: 0.75 }); chart.intervalStack() .position('value') .color('type', function(val) { return 'linear-gradient(135deg, #fff 0%, ' + (val % 2 === 0 ? '#69c2b0' : '#547ba4') + ' 100%)'; }) .label('type', { offset: -20 }) .style({ lineWidth: 1, stroke: '#fff' }); chart.render(); ``` 这个例子,使用了一个回调函数来动态生成渐变样式。根据数据的奇偶性判断使用哪种颜色渐变。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值