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

2020-03-09 14:04:59 阅读：575 来源： 互联网

标签：function 数据类型 chart js 多图 label 默认值 data options

说在前面

char.js版本：2.9.3

浏览器：google chrome 80.0.3987.132

主要参考：chartjs（不要去中文站，版本不对）

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

测试用代码

html
（我将canvas放在了一个div中）

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

javasript

<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: "data1",
                    data: [20, 59, 80, 81, 56, 56, 40]
                }
            ]
        },
        options: {
            responsiveAnimationDuration: 5000
        }
    };
    //创建
    var myLineChart = new Chart(ctx, data);
</script>

Configuration

动画(Animations)

属性

名称	数据类型	默认值	说明
duration	number	1000	动画持续时间
easing	string	'easeOutQuart'	指定动画在不同点上的行进速度，详见jQuery UI API - Easings
onProgress	function	null	动画持续过程中调用的函数
onComplete	function	null	动画完成时调用的函数

全局访问
如Chart.defaults.global.animation.duration = 5000

options访问

options: {
	animation: {
    	duration: 1000,
    	onComplete: function(){
			alert("animation finished!");
		}
    }
}

easing
见easings、Robert Penner’s easing equations、jQuery UI API - Easings
在这里插入图片描述

    var easing_type = ['linear', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad',
        'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart',
        'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint',
        'easeInOutQuint', 'easeInSine', 'easeOutSine', 'easeInOutSine',
        'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInCirc',
        'easeOutCirc', 'easeInOutCirc', 'easeInElastic', 'easeOutElastic',
        'easeInOutElastic', 'easeInBack', 'easeOutBack', 'easeInOutBack',
        'easeInBounce', 'easeOutBounce', 'easeInOutBounce' ];
    var i = 0;
    setInterval(function () {
        i = (i) % easing_type.length;
        console.log(i);
        myLineChart.data.datasets[0].label = easing_type[i];
        myLineChart.data.datasets[0].data.splice(0, 1);
        myLineChart.data.datasets[0].data.push(parseInt(Math.random() * 50) + 20);
        myLineChart.update({
            easing: easing_type[i]
        });
        i = i + 1;
    }, 1500);*/

布局(Layout)
- 属性
  
  名称数据类型默认值说明
  
  padding number|object 0 chart与canvas之间的间隔
- 全局访问
  如Chart.defaults.global.layout.padding = 10
- options访问
```
options: {
	padding: {
    	top: 10
	}
}
```

图例(Legend)

全局访问
如Chart.defaults.global.legend.display = false

options访问
如

options: {
	legend: {
    	display: false
    	}
	}

属性

名称	数据类型	默认值	说明
display	boolean	true	是否显示图例

设置为 false 时可以看到dataset的label不显示了

在这里插入图片描述

名称	数据类型	默认值	说明
position	string	'top'	图例的位置, top, bottom, right, left

position为right时
在这里插入图片描述

名称	数据类型	默认值	说明
align	string	'center'	图例在行或列中的位置, start, center, end

position为top、align为start时在这里插入图片描述

名称	数据类型	默认值	说明
fullWidth	boolean	true	图例是否需要占据整个canvas的宽度

fullWidth这个属性好似乎没啥用，用了下，感jio没啥区别

名称	数据类型	默认值	说明
onClick	function		点击标签时调用的函数
onHover	function		光标进入标签时调用的函数
onLeave	function		光标离开标签时调用的函数

// <h1 id='TitleID'>ChartJS TEST</h1>
options: {
	legend: {
    	onClick: function(){document.getElementById('TitleID').innerHTML="Click Item";},
        onHover: function(){document.getElementById('TitleID').innerHTML="In Item";},
        onLeave: function(){document.getElementById('TitleID').innerHTML="Out Item";}
            }
        }

在这里插入图片描述

名称	数据类型	默认值	说明
labels	object		图例中的标签对象

options: {
    legend: {
        labels: {
        	boxWidth: 100, # label旁边小方框的宽度
        	fontSize: 16,  # label字体大小
        	fontStyle: ,   # label字体风格
        	fontFamily: ,  # label字体样式
        	padding: ,     # label小方框间隔
        	generateLabels: ,
        	filter: ,
        	usePointStyle: ,
            fontColor: 'rgb(255, 99, 132)'
        }
    }
}

~~东西太多，写起来有点卡，，，这部分其他就详见官网~~

太卡了，拆开来吧

标签：function,数据类型,chart,js,多图,label,默认值,data,options
来源： https://blog.csdn.net/qq_33446100/article/details/104728119

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9