react ----coreUI CChart使用填坑记录

react ----coreUI CChart使用填坑记录

先看下实现的效果图

1.coreUI 的chart是基于Chart.js 重新封装了一下
所以接口调用可以参考如下链接的文档
https://www.chartjs.org/

但是coreUI 重新封装了Chart.js,所以有些接口参数 不是完全对应，走了不少弯路，象横坐标的 时间展示格式，最后是看了coreUI的源码，才知道怎么用哪个参数怎么用的。
具体使用如下：
datasets的data 参数结构如下

hourCurveValueP =
[
    {
        "x": "2021-03-26T09:00:00.000Z",
        "y": 221.6
    },
    {
        "x": "2021-03-26T09:00:01.282Z",
        "y": 219
    },
    {
        "x": "2021-03-26T09:05:31.573Z",
        "y": 222.1
    },
    {
        "x": "2021-03-26T09:06:01.597Z",
        "y": 216.3
    },
    {
        "x": "2021-03-26T09:06:31.625Z",
        "y": 222.1
    },
    {
        "x": "2021-03-26T09:08:31.730Z",
        "y": 219.3
    },
    {
        "x": "2021-03-26T09:09:01.756Z",
        "y": 223.4
    },
    {
        "x": "2021-03-26T09:11:01.857Z",
        "y": 218.1
    },
    {
        "x": "2021-03-26T09:11:31.884Z",
        "y": 221
    },
    {
        "x": "2021-03-26T09:12:31.937Z",
        "y": 223.6
    },
    {
        "x": "2021-03-26T09:14:02.014Z",
        "y": 221.2
    },
    {
        "x": "2021-03-26T09:15:32.091Z",
        "y": 216.3
    },
    {
        "x": "2021-03-26T09:16:02.116Z",
        "y": 220
    }
]

labels 参数结构如下（横坐标显示的数值）

["2021-03-26T09:17:02.164Z","2021-03-26T09:17:32.189Z","2021-03-26T09:18:32.240Z","2021-03-26T09:19:02.266Z","2021-03-26T09:19:32.291Z","2021-03-26T09:20:02.315Z","2021-03-26T09:20:32.341Z","2021-03-26T09:21:02.368Z","2021-03-26T09:21:32.392Z","2021-03-26T09:22:02.417Z"]

组件调用传参如下

                <CChart
                  type = "line"
                  labels={hourCurveTimeP}
                  datasets={[
                    {
                      fill: false,
                      label: '当前功率',
                      borderColor: 'rgba(0,162,232,.6)',
                      data: hourCurveValueP,
                      steppedLine: true,
                    }
                  ]}
                  options={{
                    animation: {
                      duration: 0 // general animation time
                    },
                    hover: {
                      animationDuration: 1000 // duration of animations when hovering an item
                    },
                    responsiveAnimationDuration: 0, // animation duration after a resize
                    tooltips: {
                      enabled: true
                    },
                    scales: {
                      xAxes: [{
                        type: 'time',
                        display:true,
                        unit:"minute",
                        time: {
                          displayFormats: {
                            minute: 'HH:mm:ss' //这块比较坑 看了 coreUI chartjs源码 才知道 横坐标格式需要这样写
                          }
                        },
                        ticks:{
                          source:'labels'
                        }
                      }]
                    }
                  }}
                />
                    ```