【前端/chart.js】各种属性记录(一/多图预警)

说在前面

• char.js版本：2.9.3
• 浏览器：google chrome 80.0.3987.132
• 主要参考：chartjs（不要去中文站，版本不对）
• 下一篇：【前端/chart.js】各种属性记录(二/多图预警)

初识

安装什么的就不管了，直接下载引用就行

• 简易创建

  • 创建canvas
    （关于width、height实在有点迷，这里我是将其放在一个div中）

    <canvas id="testCanvas" width="80%" height="20%"></canvas>
    

  • 创建chart

    <script src="static/js/Chart.js"></script>
    <script type="text/javascript">
    	var ctx = document.getElementById("testCanvas").getContext("2d");
    	var data = {
    	    //chart类型为折线图
    		type: "line", 
    		//设置chart 的数据
    		data: {
    		    // x轴标签
    			labels: ["1", "2", "3", "4", "5", "6", "7"],
    			// 数据集，可以有多个
    			datasets: [{
    			        // 第一个数据集的标签
    					label: "data",
    					// 第一个数据集的数据，array类型
    					data: [20, 59, 80, 81, 56, 55, 40]
    				}
    			]
    		},
    		//配置选项
    		options: {
    		}
    	};
    	//创建
    	var myLineChart = new Chart(ctx, data);
    </script>
    

  • 显示结果
    

通用属性

• 全局属性设置

  • 使用Chart.defaults.global来设置全局属性，并且在创建Chart对象时可以覆盖全局属性
  • 可以输出查看一下
    

• 自适应(Responsive)

  canvas弊端之一：不能使用自适应。
  responsive属性默认为true

  • 访问方式

    <script src="static/js/Chart.js"></script>
    <script type="text/javascript">
    	var ctx = document.getElementById("testCanvas").getContext("2d");
    	var data = {
    		type: "line", 
    		data: {
    			labels: ["1", "2", "3", "4", "5", "6", "7"],
    			datasets: [{
    					label: "data",
    					data: [20, 59, 80, 81, 56, 55, 40]
    				}
    			]
    		},
    		options: {
    			responsive: true
    		}
    	};
    	//创建
    	var myLineChart = new Chart(ctx, data);
    </script>
    

  • 关闭自适应

    options: {
    	responsive: false
    }
    

    
  • 其他相关属性
    • responsiveAnimationDuration
Number：自适应动画间隔，单位ms；默认0
      
    • maintainAspectRatio
Boolean：自适应后，保持canvas 比例(width / height)；默认true
    • aspectRatio
Number：设置比例（width / height）；默认2
    • onResize
Function：自适应触发后调用函数；默认null

• 像素比例(Pixel Ratio)

  • Number：改变canvas的像素比例
  • 默认为window.devicePixelRatio
  • 访问方式

    options: {
    	devicePixelRatio: 10
    }
    

    这个比例为10
    
    这个比例为1
    

• 交互(Interactions)

  定义了hover的一些交互样式。

  名称	数据类型	默认值	说明
  mode	string	'nearest'	交互时的模式
  intersect	boolean	true	为true时仅在鼠标进入elem时触发
  axis	string	'x'	可选'x'、'y'、'xy'；mode='index'时默认为'x'，mode='dataset'时默认为'xy'
  animationDuration	number	400	动画的持续时间(ms)

  • 全局访问

    Chart.defaults.global.hover.mode = 'index'

  • 创建时访问

    options: {
    	hover: {//或者 tooltips
        	intersect: false,
        }
    }
    

  • intersect
true：只在进入element（如折线图上的点）时才触发hover或tooltip动画

  • mode
    以下使用’tooltips’为例

    <script type="text/javascript">
    	var ctx = document.getElementById("testCanvas").getContext("2d");
        var data = {
            type: "line",
            data: {
                labels: ["1", "2", "3", "4", "5", "6", "7"],
                datasets: [{
                        label: "data1",
                        data: [20, 59, 80, 81, 56, 56, 40]
                    },
                    {
                        label: "data2",
                        data: [21, 89, 80, 25, 55, 57, 40]
                    },
                    {
                        label: "data3",
                        data: [30, 90, 80, 30, 60, 60, 40],
                        type: 'bar'
                    }
                ]
            },
            options: {
                tooltips: {
                    intersect: false,
                    mode: 'point',
                }
            }
        };
        //创建
        console.log(Chart.defaults.global);
        var myLineChart = new Chart(ctx, data);
    </script>
    

    • nearest
      在intersect为false时效果比较明显；若同时指定axis='x'，那么鼠标在接近某个x轴标签（如上述'1'）时，会收集所有距离该标签最近的点的信息并显示到tooltip（就是小气泡）中
      
    • point
      只显示所有通过同一点的信息；若intersect=false，那么会显示该点附近的所有点的信息（但是这里有点迷）
      
    • index
      设置intersect: false,mode: 'index',axis: 'y'，当鼠标在下图红色部分时，显示的是'5'的数据，因为在所有高于红色部分的点中，'5'的点在y轴上距离红色部分最近
      
      

• Colors

  • 设置背景图像(使用CanvasPattern)
    创建一个img节点，可以设置为不可见hidden

    <img id="testImg" src="http://wx2.sinaimg.cn/large/9c3369bdgy1fom77q7nerj20qo0ffq8c.jpg" hidden></img>
    

    创建canvas pattern

    <script src="static/js/Chart.js"></script>
    <script type="text/javascript">
        //获取img
    	var imgObj = document.getElementById("testImg");
        var ctx = document.getElementById("testCanvas").getContext("2d");
        //创建pattern
        var fillPattern = ctx.createPattern(imgObj, "repeat");
    	var data = {
    		type: "line", 
    		data: {
    			labels: ["1", "2", "3", "4", "5", "6", "7"],
    			datasets: [{
    					label: "data",
    					data: [20, 59, 80, 81, 56, 55, 40],
    					//使用pattern
    					backgroundColor: fillPattern
    				}
    			]
    		},
    		options: {
    		}
    	};
    	//创建
    	var myLineChart = new Chart(ctx, data);
    </script>
    

    （我尝试了像官网那样直接创建Image对象，但没成功）
    
  • 使用绘制图形
    这里使用了另一个插件，我嫌麻烦就没搞了，有兴趣可自行尝试。

• 字体(Fonts)

  • 全局属性4个：defaultFontColor、defaultFontFamily、defaultFontSize、defaultFontStyle
    访问方式如：Chart.defaults.global.defaultFontColor='red'
  • 对应的options属性：fontColor、fontFamily、fontSize、fontStyle
    访问方式如：

    options: {
    	legend: {
        	labels: {
            	fontColor: 'red',
            	fontSize: 24,
            	fontFamily: 'Microsoft YaHei'
            }
        }
    }
    

    
    red_24_Microsoft YaHei
    
    默认
    
    其他访问方式如：

    options: {
    	scales: {//尺度
        	yAxes: [{//y轴
            	ticks: {//标签
                	fontColor: 'red'
                }
        	}]
    	}
    }
    

    

---

第一部分结束…