js 图表插件 chartjs 2.4

PS:该图表插件对手机端支持挺好

网上的文章大多数的参数都是老版本的过时的，最新api查看官网http://www.chartjs.org/docs/

下载地址 https://github.com/chartjs/Chart.js/releases/tag/v2.4.0

点击 tags可以下载其它版本

使用方法

第一步下载 copy dist文件夹下面的资源文件到项目接着引入

<script src="${baseURL}/js/3rd-plug/Chart.js-2.4.0/Chart.bundle.js" type="text/javascript"></script>
    <script src="${baseURL}/js/3rd-plug/Chart.js-2.4.0/utils.js" type="text/javascript"></script>

第二步然后dom创建一个画布元素设置高宽

<div class="chartsdiv" id="chartsdiv">
                <canvas id="canvas" style="height:300px;" height='300'></canvas>
            </div>

第三步 js设置config 全局引用 option和data，然后初始化 config，方便以后数据data更新能通知报表更新数据，因为初始化存的是config引用，config每次更新的时候报表都会去取config，如果单独初始化报表的时候直接给一个data数据，当data数据更改的时候，data的引用的指针改变，自然和报表初始化的时候的data指针不同，所以没法更新

全局初始化config配置

 var config = {
        type:'line',
        options:{
            title:{display:true,text:'成交数据 单位(元)'},
            tooltips:{mode: 'index',intersect:false},
            type: 'line',
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: '月'
                    }
                }],
                yAxes:[{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: '单位(元)'
                    }
                }]

            }
        },
        data:{

        }
    }

初始化chartjs data是没有数据的做全局数据

var ctx = document.getElementById("canvas").getContext("2d");
    $(function() {
        window.myLineChart = Chart.Line(ctx, config);
    })

初始化数据传入更新报表

 function refeshCharts(areaFangjiaList){


        var xcategory = [];
        var ysaveprice = [];
        var esavgprice = [];


        $(areaFangjiaList).each(function(){
            xcategory.push(this.FDATE)
            ysaveprice.push(this.FisrtHandAvgPrice)
            esavgprice.push(this.SeondHandAvgPrice)
        })
        config.data={
            labels: xcategory,
            datasets: [{
                label: "一手均价",
                borderColor: window.chartColors.red,
                data: ysaveprice
            }, {
                label: "二手均价",
                borderColor: window.chartColors.blue,
                data: esavgprice
            }]
        }


        window.myLineChart.update();


    }

巴特西

js 图表插件 chartjs 2.4

最新文章

热门文章