chart.js——绘制图表汇总及学习笔记

1,512

要实现chart.js绘制图表的功能

首先第一步,导入chart.js文件

<script type="text/javascript" src="js/chart1.js" ></script>

第二步,在html页面中创建<canvas>画布标签,通过外部嵌套<div>来实现控制画布的大小

    <div style="float: left;width: 5rem;height: auto;position: relative">
        <canvas id="myLineChart" width="50" height="50"></canvas>
    </div>

第三步,在js文件中实现图表初始化

初始化图表时的`type`属性包括<br>
1.折线图`line`<br>
2.竖向柱状图`bar`<br>
3.横向柱状图`horizontalBar`<br>
3.雷达图`radar`<br>
4.饼图`pie`<br>
4.甜甜圈图`doughnut`<br>
5.极地图`polarArea`<br>
6.气泡图`bubble`<br>
7.离散图`scatter`<br>
8.混合图表`mixed`<br>
9.区域图`area`<br>
//找到画布对象
var ctx = document.getElementById("myLineChart").getContext("2d");
//图表基本数据
var data = {};
var options = {};
//实例化图表
var myLineChart = new Chart(ctx, {
    type: "line",
    data: data,
    options:options
});
//查看实例化的图表对象
console.log(myLineChart);

第四步,填入数据data/options

data对象中的属性包括

data: {
    //x轴标签
    labels:[],
    //图表数据
    datasets:[
        {
            //图例名称
            label
            //数据点
            data
            //线条颜色
            borderColor
            //线条宽度
            borderWidth
            //线条划分成破折号
            borderDash
            //破折号的偏移
            borderDashOffset
            //线帽样式
            borderCapStyle
            //线连接风格
            borderJoinStyle
            //线条背景色 
            backgroundColor
            //对应的x轴的id
            xAxisID
            //对应的y轴的id
            yAxisID
            //是否填充线条背景色
            fill
        }
    ]
}

options对象中的属性包括
具体属性参考chartjs.bootcss.com/docs/config…

options: {
    //坐标轴标记
    scales: {
        yAxes: [
            {
                //轴的刻度和网格线是否显示
                display: true,
                //笛卡尔轴,直角坐标轴用于折线图、条形图和气泡图。
                //图表类型linear  logarithmic   category   time
                type: 'linear',
                //图表位置
                position: 'left',
                id:'',
                //网格线配置
                gridLines:'',
                //刻度文字
                scaleLabel:'',
                //刻度配置
                ticks: {
                //轴上数据的最大值和最小值
                    suggestedMin: 0,
                    suggestedMax: 400
                }
                
                display: true,
                id: 'y-axis-1',
            },
            {
                type: 'linear',
                display: true,
                position: 'right',
                id: 'y-axis-2',
                gridLines: {
                    drawOnChartArea: false
                }
            }
        ]
    }
    //布局配置,间距设置
    layout: {},
    // 覆盖全局设置,图表交互配置   events,modes
    hover: {},
    //动画配置
    animation: {},
    //图例配置,图表上出现的区域
    legend: {},
    //图表标题,图表顶部绘制的文本
    title: {},
    //提示框配置
    tooltips: {},
    
    //全局配置
    //空
    
}