react-chartjs-2 使用chart.js心得

最新推荐文章于 2024-08-13 08:03:31 发布

黑白a分明

最新推荐文章于 2024-08-13 08:03:31 发布

阅读量1k

点赞数

分类专栏： chart.js 文章标签： react.js 前端经验分享

本文链接：https://blog.csdn.net/qq_43294821/article/details/130456335

版权

chart.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

react-chartjs-2 使用chart心得@chart.js,react-chartjs-2,getLabelForValue

本人使用 react-chartjs-2 ，使用hooks进行组件开发发现的问题总结
首先上项目例图
在这里插入图片描述
基础生成方面请参考 react-chartjs-2 。主要讲结合 chart.js 官方文档上所遇到的问题
1.首先实施刷新方面利用react hooks的 state和useEffect的钩子，部分参考代码例子如下

let [state,setState]= useState({
         
        labels:labelsList(),
        datasets: [
          {
            label: 'SPL',
            data: [] as any,
            fill: true,
            borderColor: 'rgba(41, 86, 155, 1)',
            backgroundColor: 'rgba(97, 146, 186, 0.5)',
            showLine:true
          },
        ],
    }
  );
//  下面是刷新部分，部分参考例子，这个labelsList() 就是x轴上面的数组内容，至于c就是动态的数组，各位按照项目需求自行构建
    setState({
          labels:labelsList(),
          datasets: [
            {
              label: 'SPL',
              data: c,
              fill: true,
              borderColor: 'rgba(41, 86, 155, 1)',
              backgroundColor: 'rgba(97, 146, 186, 0.5)',
              showLine:true
            },
          ],
        })

这样刷新的条件就满足了，chart界面就会不停的刷新。
2.数据方面是这样完成，接下来就是此记录的重点如果生成 x，y轴
其中y轴的生成 suggestedMax，suggestedMin 可以控制y轴的大小值，根据实施刷新的值进行y轴的变化
参考如下：Linear Scale - Suggested Min-Max | Chart.js (chartjs.org)
至于x轴，查阅了许多资料，发现主要问题有几个
（1).因为项目使用的x轴是秒的标签 x轴放不下会导致默认配置进行缩减，并发生倾斜45的
在这里插入图片描述这个时候需要进行默认配置的取消，我在官方文档中查阅到

autoSkip 原来默认参值进行缩减配合着autoSkipPadding，但是使用这个autoSkipPadding无法满足项目的需求
但是如何去除倾斜可以在此段落中找到 maxRotation:0 这样就不会产生缩短倾斜
在这里插入图片描述
项目需求 x轴按照10的倍数进行缩减我在官方例子中查到
这里使用到了api值 getLabelForValue

我当时突然蒙了，如何才能调用api呢？上述结合使用的代码如下

ticks: {
              autoSkip:true,
              maxRotation:0,
             // autoSkipPadding:100,
              // For a category axis, the val is the index so the lookup via getLabelForValue is needed
              callback: function(val, index) {
                return index % 10 === 0 && typeof val === 'number' ? this.getLabelForValue(val) : '';
              },

看到这里，结合代码后，各位常用ts的编写的人势必明白了，我在查阅大量的资料发现，ts可以使用this这个api方法
不过有多处地方需要修改注意！下面我各个例举出来

const options:ChartOptions={
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'top',
            display:false,
          },
          ...}

ChartOptions 这个就是调用api的关键
它的引入方法是

import {ChartOptions} from 'chart.js/auto'

此部分总结整个 x,y轴就按照需求完成了效果图就是第一张展示的样式
本人之前用js方式写的，因为用的是react-hooks 找了许多资料都没发现如何调用此api，后续此模块改用ts了，只能说ts真香，有类的概念，补全了js所没有的
后续如何在chart.js 画一条红线标注，其实使用了chart.js 的 annotation
这里简单说下如何调用这个插件，也是查阅了资料所知

import annotationPlugin from "chartjs-plugin-annotation";

引入这个方法，并在chartJs.register 注册使用

ChartJS.register（annotationPlugin）

然后就可以在 options中使用插件，

const options:ChartOptions={
    .....
     annotation: {
            annotations: {
              line1:{
                adjustScaleRange: true,
                type: 'line',
                borderColor: 'red',
                borderWidth: 1,
                scaleID: 'x',
                value: line1Index
              }
            }
        }
      .....
}
//其中 line1Index 是state值，根据react-chart.js响应事件 取到所选的x值 刷新了界面annotation上的值，从而让红线进行定位的作用

最后附上 react-chart.js 所用的return值

  <div className='chart-container ' >
              <Chart options={options} data={state} ref={chartRef} onClick={chartJsOnclick} type={'line'}/>
          </div>

//备注：因为使用了ChartOptions 所有不能使用Line，要使用Chart标签，其中chart.js 要根据画布的大小区分
//附上css，官方文档所给的例子，需要包裹画布从而控制它大小
.chart-container {
    position: relative;
    margin: 0 auto;
    height: 88%;
    width: 95%;
  }