Bootstrap自带的chart插件

最新推荐文章于 2025-07-15 14:36:36 发布

转载最新推荐文章于 2025-07-15 14:36:36 发布 · 729 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/len0031/p/4766587.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用JavaScript库Chart.js创建动态折线图的例子。通过随机生成的数据展示了如何配置图表样式，并实现了响应式设计。此外还提到了其他可用的图表库如HighCharts和ECharts。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>