JavaScript写一个柱状图

最新推荐文章于 2024-07-24 11:09:48 发布

Waiyuet Fung

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量144

点赞数

文章标签： javascript html 前端开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_35749545/article/details/129072317

版权

下面是一个使用 JavaScript 和 HTML 绘制柱状图的示例代码：

<!DOCTYPE html>
<html>
<body>

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'bar',

    // The data for our dataset
    data: {
        labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
        datasets: [{
            label: '柱状图数据',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [10, 20, 30, 40, 50, 60]
        }]
    },

    // Configuration options go here
    options: {}
});
</script>

</body>
</html>

在这段代码中，我们首先使用 HTML 的 canvas 元素创建了一个画布。然后，在 JavaScript 代码中，我们使用 Chart.js 库创建了一个新的 Chart 对象。我们指定了图表类型为 'bar'(柱状图)，并为图表提供了数据和选项。

注意，这段代码中使用的 Chart.js 库需要在页面中通过 script 标签引入。例如：

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

有关如何使用 Chart.js 库创建柱状图的更多信息，请参阅 Chart.js 官方文档：https://www.chartjs.org/

Waiyuet Fung

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript写一个柱状图

下面是一个使用 JavaScript 和 HTML 绘制柱状图的示例代码：<!DOCTYPE html><html><body><canvas id="myChart" width="400" height="400"></canvas><script>var ctx = document.getElementB...
复制链接

扫一扫