google charts

最新推荐文章于 2025-11-19 01:27:06 发布

原创最新推荐文章于 2025-11-19 01:27:06 发布 · 784 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

可视化工具专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在项目中使用Google Charts，相比于ECharts，Google Charts的引入更为轻量。通过实例展示了如何创建一个饼图，并详细讲解了数据配置和选项设置。

google charts

使用的时候，引入的包比echarts小

//在html中引入方式
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

//在项目中引用
npm install chart.js

google charts

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <title>Document</title>
    <style>
      body {
        padding: 16px;
      }

      canvas {
        border: 1px dotted red;
      }
    </style>
  </head>
  <body>
    <canvas id="chart" height="50vw" width="50vw"></canvas>
    <script>
      function getColor(number) {
        const colorList = [
          "#FFC125",
          "#FF6A6A",
          "#55A8FD",
          "#5FDAC7",
          "#FA7D7D",
          "#AEB3B8",
          "#92C789",
          "#6A6A6A",
          "#FFD700",
          "#FFC1C1",
          "#FF6A6A",
          "#E066FF",
        ];
        return colorList[number];
      }

      var mychart = document.getElementById("chart").getContext("2d");
      new Chart(mychart, {
        type: "doughnut",
        data: {
          labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
          datasets: [
            {
              data: [65, 59, 20, 81, 56, 55, 40],
              borderWidth: 1,
              backgroundColor: [65, 59, 20, 81, 56, 55, 40].map((item, index) =>
                getColor(index % 10)
              ),
            },
          ],
        },
        options: {
          maintainAspectRatio: true,
          aspectRatio: 1.5,
          plugins: {
            legend: {
              position: "right",
              labels: {
                boxWidth: 12,
                font: {
                  boxWidth: 24,
                  size: 12,
                  pointStyle: "circle",
                  usePointStyle: true,
                },
              },
            },
            tooltip: {
              callbacks: {
                label: function (context) {
                  var label = `${context.label} ${context.formattedValue}%`;
                  return label;
                },
              },
              bodyFont: {
                size: 12,
              },
            },
          },
        },
      });
    </script>
  </body>
</html>