chartjs图标插件

最新推荐文章于 2024-04-18 10:02:18 发布

Super简一

最新推荐文章于 2024-04-18 10:02:18 发布

阅读量1.2k

点赞数

分类专栏： java 文章标签： chart.js

本文链接：https://blog.csdn.net/superliang11/article/details/75083241

版权

java 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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);

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

Super简一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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"
复制链接

扫一扫

专栏目录