zoukankan      html  css  js  c++  java
  • Bootstrap自带的chart插件

    <!doctype html>
    <html>
    <head>
        <title>Line Chart</title>
        <script src="JS/Chart.min.js"></script>
    </head>
    <body>
        <div>
            <canvas id="canvas"></canvas>
        </div>
    
        <script>
            var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
            var lineChartData = {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [
                    {
                        label: "My Second dataset",
                        fillColor: "rgba(151,187,205,0.2)",
                        strokeColor: "rgba(151,187,205,1)",
                        pointColor: "rgba(151,187,205,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(151,187,205,1)",
                        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
                    }
                ]
            }
    
            window.onload = function () {
                var ctx = document.getElementById("canvas").getContext("2d");
                window.myLine = new Chart(ctx).Line(lineChartData, {
                    responsive: true
                });
            }
        </script>
    </body>
    </html>

    注意:数据源labels和data是数组,不能拼接成一个字符串放进去,没效果。

    Chart有六种样式可供选择,效果挺好的。此外,还可以考虑用HighCharts和ECharts实现图表展示。

  • 相关阅读:
    设计师用的几个网站
    微信小程序开发框架
    数据模型
    数据库系统
    大话设计模式读书笔记(一)
    关于数据统计时的效率
    orcale同一条语句运行速度差异问题
    使用plspl创建orcale作业
    正则表达式(一)
    oracle游标小试
  • 原文地址:https://www.cnblogs.com/len0031/p/4766587.html
Copyright © 2011-2022 走看看