html原生echart柱状图

html原生echart柱状图

bash 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bar Chart Example</title>
  <!-- Include Chart.js library -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    canvas {
      max-width: 600px;
      margin: 20px;
    }
  </style>
</head>
<body>
  <!-- Create a canvas element to render the chart -->
  <canvas id="myChart"></canvas>

  <script>
    // Data for the bar chart
    var data = {
      labels: ['January', 'February', 'March', 'April', 'May'],
      datasets: [{
        label: 'Sample Bar Chart',
        backgroundColor: 'rgba(54, 162, 235, 0.5)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 1,
        data: [12, 19, 15, 10, 7],
      }]
    };

    // Configuration options
    var options = {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    };

    // Get the canvas element
    var ctx = document.getElementById('myChart').getContext('2d');

    // Create the bar chart
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: data,
      options: options
    });
  </script>
</body>
</html>
相关推荐
渣渣盟17 分钟前
探索Word2Vec:从文本向量化到中文语料处理
前端·javascript·python·文本向量化
Pu_Nine_918 分钟前
Vue 3 + TypeScript 项目性能优化全链路实战:从 2.1MB 到 130KB 的蜕变
前端·vue.js·性能优化·typescript·1024程序员节
云枫晖35 分钟前
Webpack系列-Loader
前端·webpack
aggression38 分钟前
代码敲击乐:让你了解前端的动静结合和移动端的适配性
前端
yinuo39 分钟前
深入理解与实战 Git Submodule
前端
骑自行车的码农40 分钟前
React 事件收集函数
前端·react.js
无羡仙41 分钟前
JavaScript中的继承实现方式
javascript
一个处女座的程序猿O(∩_∩)O43 分钟前
Vue CLI 插件开发完全指南:从原理到实战
前端·javascript·vue.js
小蜜蜂dry1 小时前
JavaScript 原型
前端·javascript
用户90443816324601 小时前
前端也能玩 AI?用 brain.js 在浏览器里训个 "前后端分类大师",后端同事看了都沉默!
前端