chartjs图标插件

http://www.bootcss.com/p/chart.js/docs/ Chart.js 中文文档
照着敲了下

“`



tubiao.html

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript" src="$request.contextPath/js/Chart.js"></script>    <script type="text/javascript" src="$request.contextPath/js/jquery.js"></script>    <style type="text/css">

.bar-legend li span {
width: 1em;
height: 1em;
display: inline-block;
margin-right: 5px;
}

.bar-legend {
list-style: none;
}
.line-legend li span {
width: 1em;
height: 1em;
display: inline-block;
margin-right: 5px;
}

.line-legend {
list-style: none;
}
.radar-legend li span {
width: 1em;
height: 1em;
display: inline-block;
margin-right: 5px;
}

.radar-legend {
list-style: none;
}
.polararea-legend li span {
width: 1em;
height: 1em;
display: inline-block;
margin-right: 5px;
}

.polararea-legend {
list-style: none;
}

$( document ).ready(function() {
//柱状图
//绘制图表的2d context
var ctx = document.getElementById(“myChart”).getContext(‘2d’);
var data = {
labels : [“January”,”February”,”March”,”April”,”May”,”June”,”July”],
datasets : [
{
fillColor : “rgba(220,220,220,0.5)”,
strokeColor : “rgba(220,220,220,1)”,
data : [65,59,90,81,56,55,40],
label:’已销售’
},
{
fillColor : “rgba(151,187,205,0.5)”,
strokeColor : “rgba(151,187,205,1)”,
data : [28,48,40,19,96,27,100],
label:’未销售’
}
]
}
var options= {

    //Boolean - If we show the scale above the chart data               scaleOverlay : false,    //Boolean - If we want to override with a hard coded scale    scaleOverride : false,    //** Required if scaleOverride is true **    //Number - The number of steps in a hard coded scale    scaleSteps : null,    //Number - The value jump in the hard coded scale    scaleStepWidth : null,    //Number - The scale starting value    scaleStartValue : null,    //String - Colour of the scale line     scaleLineColor : "rgba(0,0,0,.1)",    //Number - Pixel width of the scale line        scaleLineWidth : 1,    //Boolean - Whether to show labels on the scale     scaleShowLabels : true,    //Interpolated JS string - can access value    scaleLabel : "<%=value%>",    //String - Scale label font declaration for the scale label    scaleFontFamily : "'Arial'",    //Number - Scale label font size in pixels      scaleFontSize : 12,    //String - Scale label font weight style        scaleFontStyle : "normal",    //String - Scale label font colour      scaleFontColor : "#666",        ///Boolean - Whether grid lines are shown across the chart    scaleShowGridLines : true,    //String - Colour of the grid lines    scaleGridLineColor : "rgba(0,0,0,.05)",    //Number - Width of the grid lines    scaleGridLineWidth : 1,     //Boolean - If there is a stroke on each bar        barShowStroke : true,    //Number - Pixel width of the bar stroke        barStrokeWidth : 2,    //Number - Spacing between each of the X value sets    barValueSpacing : 5,    //Number - Spacing between data sets within X values    barDatasetSpacing : 1,    //Boolean - Whether to animate the chart    animation : true,    //Number - Number of animation steps    animationSteps : 60,    //String - Animation easing effect    animationEasing : "easeOutQuart",    //Function - Fires when the animation is complete    onAnimationComplete : null,    onAnimationComplete: function () {        var ctx = this.chart.ctx;        ctx.font = this.scale.font;        ctx.fillStyle = this.scale.textColor;        ctx.textAlign = 'center';        ctx.textBaseline = 'bottom';        this.datasets.forEach(function (dataset){            dataset.bars.forEach(function (bar) {                ctx.fillText(bar.value, bar.x, bar.y);            });        });    }}

var bar=new Chart(ctx).Bar(data,options);
var legend = document.getElementById(‘legend’);
// 图例
legend.innerHTML = bar.generateLegend();

//曲线图
var ctx = $(“#lineChart”).get(0).getContext(“2d”);
var lineData = {//数据
labels : [“January”,”February”,”March”,”April”,”May”,”June”,”July”],
datasets : [
{
fillColor : “rgba(220,220,220,0.5)”,
strokeColor : “rgba(220,220,220,1)”,
pointColor : “rgba(220,220,220,1)”,
pointStrokeColor : “#fff”,
data : [65,59,90,81,56,55,40],
label:’已销售’
},
{
fillColor : “rgba(151,187,205,0.5)”,
strokeColor : “rgba(151,187,205,1)”,
pointColor : “rgba(151,187,205,1)”,
pointStrokeColor : “#fff”,
data : [28,48,40,19,96,27,100],
label:’未销售’
}
]
}
LineCongig = {//图标参数

     scaleOverlay : false,  // 网格线是否在数据线的上面        scaleOverride : false, // 是否用硬编码重写y轴网格线        scaleSteps : null, //y轴刻度的个数        scaleStepWidth : null, //y轴每个刻度的宽度        scaleStartValue : null,  //y轴的起始值        scaleLineColor : "rgba(0,0,0,.1)",// x轴y轴的颜色        scaleLineWidth : 1,// x轴y轴的线宽          scaleShowLabels : true,// 是否显示y轴的标签        scaleLabel : "<%=value%>",// 标签显示值        scaleFontFamily : "'Arial'",// 标签的字体        scaleFontSize : 12,// 标签字体的大小        scaleFontStyle : "normal",// 标签字体的样式        scaleFontColor : "#666",// 标签字体的颜色        scaleShowGridLines : true,// 是否显示网格线        scaleGridLineColor : "rgba(0,0,0,.05)",    // 网格线的颜色        scaleGridLineWidth : 1, // 网格线的线宽        scaleBeginAtZero: true, // y轴标记是否从0开始        scaleShowHorizontalLines: true, // 是否显示横向线        scaleShowVerticalLines: true, // 是否显示竖向线        barShowStroke : true, // 是否显示线        barStrokeWidth : 2,   // 线宽        barValueSpacing : 5,// 柱状块与x值所形成的线之间的距离        barDatasetSpacing : 1,// 在同一x值内的柱状块之间的间距        animation : true,//是否有动画效果        animationSteps : 60,//动画的步数        animationEasing : "easeOutQuart",// 动画的效果        showTooltips: true, // 是否显示提示        onAnimationComplete: function () {            var ctx = this.chart.ctx;            ctx.font = this.scale.font;            ctx.fillStyle = this.scale.textColor;            ctx.textAlign = 'center';            ctx.textBaseline = 'bottom';            this.datasets.forEach(function (dataset){                dataset.bars.forEach(function (bar) {                    ctx.fillText(bar.value, bar.x, bar.y);                });            });        }}

new Chart(ctx).Line(lineData,LineCongig);

var lineLegend = document.getElementById(‘lineLegend’);
//图例
lineLegend.innerHTML = new Chart(ctx).Line(lineData,LineCongig).generateLegend();
//雷达
var ctx = $(“#radarChart”).get(0).getContext(“2d”);
var lineData = {//数据
labels : [“January”,”February”,”March”,”April”,”May”,”June”,”July”],
datasets : [
{
fillColor : “rgba(220,220,220,0.5)”,
strokeColor : “rgba(220,220,220,1)”,
pointColor : “rgba(220,220,220,1)”,
pointStrokeColor : “#fff”,
data : [65,59,90,81,56,55,400],
label:’已销售’
},
{
fillColor : “rgba(151,187,205,0.5)”,
strokeColor : “rgba(151,187,205,1)”,
pointColor : “rgba(151,187,205,1)”,
pointStrokeColor : “#fff”,
data : [28,48,40,19,96,27,100],
label:’未销售’
}
]
}

new Chart(ctx).Radar(lineData,LineCongig);
var radarLegend = document.getElementById(‘radarLegend’);
//图例
radarLegend.innerHTML = new Chart(ctx).Radar(lineData,LineCongig).generateLegend();
//极地图
var data = [
{
value : 30,
color: “#D97041”,
label:’红’

},{    value : 90,    color: "#C7604C",    label:'红'},{    value : 24,    color: "#21323D",    label:'红'},{    value : 58,    color: "#9D9B7F",    label:'红'},{    value : 82,    color: "#7D4F6D",    label:'红'},{    value : 8,    color: "#584A5E",    label:'红'}

]
var ctx = (“#polarChart”).get(0).getContext(“2d”);  
new Chart(ctx).PolarArea(data,LineCongig);  
var polarLegend = document.getElementById(‘polarLegend’);  
//图例  
polarLegend.innerHTML = new Chart(ctx).PolarArea(data,LineCongig).generateLegend();  
//饼图  
        var ctx =(“#pieChart”).get(0).getContext(“2d”);
var pie=new Chart(ctx).Pie(data,LineCongig);
var pieLegend = document.getElementById(‘pieLegend’);
//图例
pieLegend.innerHTML = pie.generateLegend();
//环形图
var ctx = $(“#doughnutChart”).get(0).getContext(“2d”);
var Doughnut=new Chart(ctx).Doughnut(data,LineCongig);
var doughnutLegend = document.getElementById(‘doughnutLegend’);
//图例
doughnutLegend.innerHTML = Doughnut.generateLegend();
});

<body><div width="300" height="200" style="border:1px solid blue;float: left;"><span>柱状图</span>    <canvas id="myChart" width="300" height="200"></canvas>    <div id="legend"></div></div><div width="300" height="200" style="border:1px solid blue;float: left;"><span>曲线图</span>    <canvas id="lineChart" width="400" height="200"></canvas>    <div id="lineLegend"></div></div><div width="200" height="200" style="border:1px solid blue;float: left;"><span>雷达图</span>    <canvas id="radarChart" width="200" height="200"></canvas>    <div id="radarLegend"></div></div><div width="300" height="200" style="border:1px solid blue;float: left;"><span>极地图</span>    <canvas id="polarChart" width="300" height="200"></canvas>    <div id="polarLegend"></div></div><div width="300" height="200" style="border:1px solid blue;float: left;"><span>饼图</span>    <canvas id="pieChart" width="400" height="200"></canvas>    <div id="pieLegend"></div></div><div width="200" height="200" style="border:1px solid blue;float: left;"><span>环形图</span>    <canvas id="doughnutChart" width="200" height="200"></canvas>    <div id="doughnutLegend"></div></div></body>

//动态数据获取
( document ).ready(function() {  
    var shopId=(“#shopId”).val();
var startTime=(“#startTime”).val();  
    var datas= [];  
    var sendMoney= [];  
    var payMoney= [];.ajax({
type:”POST”,
url:”$request.contextPath/dingdan/saleDayDetailListApi.ac”,
data: “sales.shopId=”+shopId+”&sales.sumDate=”+startTime,
dataType:”json”,
sync:false,
success: function(data){
for (var i = 0; i < data.length; i++) {
datas[i]=data[i].exp1+”日”;
sendMoney[i]=data[i].sendAmount;
payMoney[i]=data[i].payAmount;
}
// 柱状图数据
var chartData = {
// x轴显示的label
//labels:[‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’, ‘7月’],
labels:datas,
datasets:[
{
fillColor:’#62a8ea’,// 填充色
// data:[600, 700, 800, 560, 400, 9000, 5840], // 数据
data:sendMoney, // 数据
label:’已发货金额’ // 图例
},
{
fillColor:’#D4CCC5’,// 填充色
//data:[600, 700, 800, 560, 400, 9000, 5840], // 数据
data:payMoney, // 数据
label:’已付款金额’ // 图例
}
]
};
// 柱状图选项设置
var configs = {
scaleOverlay : false, // 网格线是否在数据线的上面
scaleOverride : false, // 是否用硬编码重写y轴网格线
scaleSteps : null, //y轴刻度的个数
scaleStepWidth : null, //y轴每个刻度的宽度
scaleStartValue : null, //y轴的起始值
scaleLineColor : “rgba(0,0,0,.1)”,// x轴y轴的颜色
scaleLineWidth : 1,// x轴y轴的线宽
scaleShowLabels : true,// 是否显示y轴的标签
scaleLabel : “<%=value%>”,// 标签显示值
scaleFontFamily : “‘Arial’”,// 标签的字体
scaleFontSize : 12,// 标签字体的大小
scaleFontStyle : “normal”,// 标签字体的样式
scaleFontColor : “#666”,// 标签字体的颜色
scaleShowGridLines : true,// 是否显示网格线
scaleGridLineColor : “rgba(0,0,0,.05)”, // 网格线的颜色
scaleGridLineWidth : 1, // 网格线的线宽
scaleBeginAtZero: true, // y轴标记是否从0开始
scaleShowHorizontalLines: true, // 是否显示横向线
scaleShowVerticalLines: true, // 是否显示竖向线
barShowStroke : true, // 是否显示线
barStrokeWidth : 2, // 线宽
barValueSpacing : 5,// 柱状块与x值所形成的线之间的距离
barDatasetSpacing : 1,// 在同一x值内的柱状块之间的间距
animation : true,//是否有动画效果
animationSteps : 60,//动画的步数
animationEasing : “easeOutQuart”,// 动画的效果
showTooltips: false, // 是否显示提示
// 图例
legendTemplate : ‘

-legend\”><% for (var i=0; i