chart.js注释笔记

chart.js注释笔记

chart.js的优势
研究了Highcharts、百度的ECharts、阿里的G2和Charts.js四个图表库，由于项目对图表需求不大，图表不复杂，所以引入了轻量级的Charts.js。Chart.js很容易上手，只需要在页面中引用脚本文件，并创建 节点即可渲染出图表。
GitHub源码： https://github.com/nnnick/Chart.js
Chart.js文档：http://www.bootcss.com/p/chart.js/

<script>
    var ctx=document.getElementById("myChart").getContext("2d");
   
    var type="bar";     //图例的种类     曲线    "bar"   柱状    "pie"  饼状    "doughnut"  圆圈状   "horizontalBar"   水平柱
    var data={
        //折线图需要为每个数据点设置一标签。这是显示在X轴上。
        labels:['2014', '2015', '2016', '2017', '2018', '2019'],
        //数据集（y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的）
        datasets:[{                                 //数据集
            label:"数据1",                          //数据的标题
            data:[12,30,45,10,0,7],                  //对象数据
            borderColor:"blue",                      //线色
            fill:true,                              //是否填充   线到 底部的范围
            borderWidth:1,                          //线宽
            fillColor:"rgba(0,45,14,0.5)",          //填充颜色
            strokeColor: "rgba(220,220,220,1)",     //路径颜色
            pointStyle: 'rect',                     //数据点的样式    circle   cross  crossRot  dash  line   rect    rectRounde   rectRot   star   trangle
            pointRadius: '5',                       //点的半径
            pointBackgroundColor: 'red',            //数据点的填充颜色
            pointBorderColor: '#000',               //数据点的边框颜色
            tension: 0,                             //有无张力   没有张力
            yAxisID: 'y-axis-1',                    //数据的id
        },{
            label:"数据2",
            data:[0,10,20,40,30,50],
            borderColor:"red",
            fill:true,
            borderWidth:2,
            fillColor:"rgba(0,0,0,0.5)",
            // tension:0,
            yAxisID: 'y-axis-2',
        }], 
    };
    var options={                           //选项集合
        responsive: false,                  //是否响应式options
        title:{
            text:"数据排行",                 //表头
            display:true,                   //表头显示
            fontSize:18,                     
            fontColor:"orange",
            position:"bottom"               //表头的位置   right  left  top  bottom
        },
        //设置 坐标轴  选项列
        scales:{
            yAxes:[{                        //设置y轴方向
                stacked:true,                //柱状图是否重叠
                id:"y-axis-1",
                type: 'linear',
                display: true,
                position: 'left',                        
                ticks:{
                   // min:0,                //最小尺寸   固定
                   // max:100,               //最大尺寸   固定
                    suggestedMin:0,         //建议对最小尺寸    动态 
                    suggestedMax:100,       //建议最大尺寸      动态
                    stepSize:10,            //轴线的刻度
                    callback:function(value,index,values){           //执行回调函数      ( 值     序号    值的集合 )
                        return value+'x'                    
                    },
                }
            },
            {   
                stacked:true ,               //柱状图是否重叠
                id:"y-axis-2", 
                type: 'linear',
                display: true,
                position: 'right',                     
                ticks:{ 
                    suggestedMin:0,         
                    suggestedMax:100,       
                    stepSize:10,            
                    callback:function(value,index,values){           
                        return value+'x'                    
                    },
                }
            }],
            xAxes:[{                //设置x轴
                stacked:true,                //柱状图是否重叠
                ticks:{
                    callback:function(value,index,values){
                        return value+'年'
                    }
                }
            }],
        },
        //设置数据的标题 位置
        legend:{         
            display:true,               
            position: 'right',          //坐标轴位置  右边   "right"  "left"  "bottom"   "top"
            labels: {
                boxWidth: 30,           // 修改标题盒子的宽度
                fontSize: 14,           //标题字体大小
                fontColor:'#000000'     //字体颜色
            }
        },
        //运动图表特效
        animation:{
            duration:1000,             //动画时长
            easing:"easeInBounce",      //动画运动样式    easeOutQuart    easeInBounce   ...
        }
    };


/*****************************************chartjs  的结构******************************************************/
    var myChart=new Chart(ctx,{         //chart 结构 
        type:type,
        data:data,
        options:options
    })
</script>