以'角度图表 js 甜甜圈颜色 - Javascript '作主题

简介

角度图表或者扇形图表是数据可视化中常用的一种图表类型。在JavaScript中，我们可以使用多种库来生成这种类型的图表。

本文将介绍如何使用JavaScript生成一个带有颜色的甜甜圈图表。

实现步骤

步骤一：导入需要的库

我们需要导入两个库：chart.js和randomColor.js。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.6.2/randomColor.min.js"></script>

步骤二：创建HTML元素

我们需要在HTML文件中创建一个canvas元素。这个元素将用来绘制图表。

<canvas id="myChart" width="400" height="400"></canvas>

步骤三：生成随机颜色

我们可以使用randomColor.js生成随机颜色。

let randomColor = require('randomcolor');
let colors = randomColor({
  count: 8,
  luminosity: 'dark',
  hue: 'blue'
});

步骤四：设置数据

现在我们需要设置我们的数据。我们将使用一个包含多个对象的数组来表示数据。每个对象表示了一组数据的值和标签。

let data = [
  {
    value: 20,
    label: 'Label 1'
  },
  {
    value: 30,
    label: 'Label 2'
  },
  {
    value: 10,
    label: 'Label 3'
  },
  {
    value: 5,
    label: 'Label 4'
  },
  {
    value: 15,
    label: 'Label 5'
  },
  {
    value: 10,
    label: 'Label 6'
  },
  {
    value: 5,
    label: 'Label 7'
  },
  {
    value: 5,
    label: 'Label 8'
  }
];

步骤五：创建图表

现在我们可以使用chart.js创建我们的甜甜圈图表。

let ctx = document.getElementById('myChart');
let chart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: data.map((d) => d.label),
    datasets: [
      {
        data: data.map((d) => d.value),
        backgroundColor: colors,
        borderColor: colors
      }
    ]
  },
  options: {
    legend: {
      display: true,
      position: 'left'
    }
  }
});

步骤六：完成

完成了！我们现在可以在浏览器中查看我们的图表了。

结论

在本文中，我们学习了如何使用JavaScript和两个库（chart.js和randomColor.js）来生成一个带有颜色的甜甜圈图表。

参考资料

• Chart.js - Doughnut Chart
• Random Color Generator