Bootstrap自帶的chart插件

本文轉載自查看原文 2015-08-28 15:03 2189 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實現圖表展示。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Bootstrap常用的自帶插件 Bootstrap自帶的那些常用插件 Bootstrap自帶的那些常用插件-輪播圖 jQuery 實現Bootstrap Chart 圖表 Chart.js插件 Bootstrap Chart組件使用分享 bootstrap 自帶字體顏色如何使用Bootstrap自帶圖標 BootStrap自帶的圖標 Bootstrap Blazor 實戰 Chart 圖表使用(1)