zoukankan      html  css  js  c++  java
  • chart 数据 图表插件

     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

    拆线示例:

    <canvas id="chart_trade" height="60"></canvas>
                                <script>
                                    var lineChartData = {
                                        labels: ["D1", "D2", "D3", "D4", "D5", "D6", "D7", "D8", "D9", "D10", "D11", "D12", "D13", "D14","D15", "D16", "D17", "D18", "D19", "D20", "D21","D22", "D23", "D24", "D25", "D26", "D27", "D28"],
                                        datasets: [{
                                            fillColor: "rgba(151,187,205,0)",
                                            strokeColor: "rgba(255,0,0,1)",
                                            pointColor: "rgba(255,0,0,1)",
                                            data: [3, 13, 19, 14, 11, 14, 15, 16, 15, 17, 19, 22, 21, 22, 21, 25, 27, 29, 22, 22, 21, 23, 25, 27, 29, 22, 21, 21]
                                        }, {
                                            fillColor: "rgba(220,220,220,0)",
                                            strokeColor: "rgba(255,133,27,1)",
                                            pointColor: "rgba(255,133,27,1)",
                                            data: [15, 22, 29, 25, 26, 27, 25,27, 27, 28, 23, 30, 22, 27,33, 34, 35, 36, 40, 38, 44,37, 41, 44, 41, 47, 48, 49]
                                        }, {
                                            fillColor: "rgba(151,187,205,0)",
                                            strokeColor: "rgba(120,192,110,1)",
                                            pointColor: "rgba(120,192,110,1)",
                                            data: [28, 35, 39, 31, 32,33, 35,39, 34, 35, 30, 34, 30, 36,35, 44, 43, 40, 44, 40, 40,45, 44, 45, 40, 44, 40, 43]
                                        }
                                        ]};
    
                                    var ctx = document.getElementById("chart_trade").getContext("2d");
                                    var LineChartDemo = new Chart(ctx).Line(lineChartData, {
                                        animation : true,// 是否执行动画
                                        animationEasing : 'easeOutBounce',// 动画的特效
                                        animationSteps : 50,// 动画的时间
                                        tooltipYPadding : 12,//鼠标经过tip背景padding值
                                        tooltipCornerRadius : 3,//鼠标经过tip背景圆角
                                        tooltipTitleFontStyle : 'Arial',//鼠标经过tip字体
                                        pointDot : false,// 是否显示点数
                                        scaleShowVerticalLines: false,
                                        bezierCurve: true,//是否要曲线
                                        pointDotRadius: 5,//数值点的大小
                                        tooltipFillColor : 'rgba(0,0,0,0.6)',//鼠标经过tip背景
                                        scaleLineColor : '#666',//轴线颜色
                                        scaleGridLineColor: '#ddd',//网格线颜色
                                        scaleFontSize : 14,//轴标字体大小
                                        scaleFontFamily : "'Arial'",
                                        responsive: true//大小自适应
                                    });
                                </script>

    饼图示例:

    <canvas id="chart_loss"></canvas>
                                <script>
                                    var pieChartData = [
                                        {
                                            value: 20,
                                            color:"#ff851b"
                                        },
                                        {
                                            value : 80,
                                            color : "#ff4141"
                                        }
                                    ];
                                    var ctx = document.getElementById("chart_loss").getContext("2d");
                                    var LineChartDemo = new Chart(ctx).Pie(pieChartData);
                                </script>

     

     才下配置可在纵坐标上带亿单位


    scaleLabel : "<%=value/100000000%>亿",

    以上可在纵坐标上显示亿

    https://www.oschina.net/question/151271_243108

    示例: http://web.jobbole.com/83760/

      

    阿里图表:

    http://antv.alipay.com/g2-mobile/demo/02-line/line.html

  • 相关阅读:
    python模块--time模块
    python模块--如何相互调用自己写的模块
    Animating Views Using Scenes and Transitions
    fragment 切换
    android textview 设置text 字体
    android intent 5.1
    android EditView ime
    animation of android (4)
    animation of android (3)
    animation of android (2)
  • 原文地址:https://www.cnblogs.com/xiangsj/p/6339430.html
Copyright © 2011-2022 走看看