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