欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

chartjs图标插件

程序员文章站 2022-07-13 15:51:52
...

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

相关标签: chart.js