chart.js——chart.js3.3.2学习经验汇总

这几天我一直在进行关于chart.js的学习，刚开始学习的时候就一头扎入未知版本的chart.js的文档学习属性。

通过几天的学习，我总结出了以下几点有关于我之前的学习方法的弊端及正确方法

1.chart.js的版本众多，每个版本中的配置属性上都有些差别，未知chart.js的版本去学习时常常会遇见各种xxxx not function的报错，这些报错的主要原因是引用的chart.js的版本和自己开发时使用的方法匹配不上。

2.在找对版本，找对文档后。第一步要做的不应该是一头扎进属性里去，而是应该先把文档的整体结构列出来，做一个属性分类的思维导图，属性的细节等到实际应用时再根据分类慢慢查找

解决办法
在这里给大家推荐一个最新版本的chart.js 3.3.2，具有完整的文档，并且对于各种问题，网上的回答丰富且有效，这里放上官方地址 www.chartjs.org/
点击入门就是官方文档

这是chart.js 3.3.2的下载地址 cdnjs.com/libraries/C…

这里再放两个比较完整易懂的学习地址
GIT BOOK chartjs.bootcss.com/docs/charts…

Chart.js 学习笔记 my.oschina.net/NamiZone/bl…

正文开始向大家介绍我整理的chart.js 3.3.2的官方文档的总结

大家可以据此对应找到想要修改的对象，一定程度上能提升大家的编程速度吧

option[
    interaction  交互配置
    events,onHover,onClick 事件配置
    animations  动画配置
    layout  整个表的布局配置
    plugins ---[
       legend  图例
       title   标题
       tooltips  提示
    ]
    elements  不同图表的特有样式----[
        point  折线图/雷达图/气泡图 中的点
        line  折线图 中的线
        bar  条形图 中的条形
        arc  极地图/圆环图/饼图 中的弧线
    ]   
    scales  轴，内部放轴的各种名称即填入xAxisID/yAxisID/rAxisID----[
        这往后就是有关笛卡尔轴的内容，我用到的场景不多，所以碰到了再去了解
        这里关于轴一定要提的是，默认的轴的名称是'x','y','r'
        如果填入其他名称，则默认是新建一个轴
        type 属性也是需要填在轴对象内部的
    ]   

]

data----[
    lables  表标题
    datasets  表的数据
]

以上需要对scales中的轴对象进行举例

scales:{
                y:{
                    display:false,
                    min:0,
                    max:dataList[1][4],
                    // suggestedMax:300,
                    // suggestedMin:150,
                    ticks:{
                        display:true,
                        // padding: 30,
                        stepSize:100,
                        font:{
                            size:15,
                            style: "normal",
                        }

                    },
                    grid:{
                        display:true,
                        color:"#969696",

                    },
                    // title:{
                    //     color: '#969696',
                    //     align:"end",
                    //     font:{
                    //         size:18,
                    //         style:"normal",
                    //     },
                    //     display: true,
                    //     text: '数量',
                    //     padding:5,
                    // }

                    // weight:0,
                },
                x:{
                    display:true,
                    ticks:{
                        padding: 10,
                        font:{
                            size:15,
                            style: "normal",
                        }

                    },
                    grid:{
                        display:false
                    }
                }
            }