设置 QuickCharts 颜色

Question

我想通过生成 < img src = "..." > 标签来生成一个饼图以包含在电子邮件正文中。为此，我遇到了一个名为 Quickcharts(https://quickchart.io/) 的图表库，它是一个开源图表库。

不知怎么的，我不知道如何在 Quickcharts 中更改每个切片的背景颜色。目前，我有这样的东西，

https://quickchart.io/chart?width=270&height=200&c={type:%27pie%27,data:{labels:[%27High%27,%27Medium%27,%20%27Low%27],%20datasets:[{data:[50,60,70]}]}}

我想更改饼图的背景颜色并带上快速图表，类似于此。

https://image-charts.com/chart?cht=pc&chco=4e73df%2C0f3dc4%2C9fb4f3&chd=t:11,110,69&chs=500x160&chl=5.8%25%7C57.9%25%7C36.3%25&chdl=High%7CMedium%7CLow

如果有人可以提供帮助，请告诉我。提前致谢。

Answer 1

使用Chart.js，您可以使用backgroundColor属性设置饼图的背景颜色：

{
  type: 'pie',
  data: {
    labels: ['High', 'Medium', 'Low'],
    datasets: [{
      data: [50, 60, 70],
      backgroundColor: ['#4e73df', '#0f3dc4', '#9fb4f3']
    }]
  }
}

此外，您可能希望使用 datalabels 插件更改标签的颜色：

{
  type: 'pie',
  data: {
    labels: ['High', 'Medium', 'Low'],
    datasets: [{
      data: [50, 60, 70],
      backgroundColor: ['#4e73df', '#0f3dc4', '#9fb4f3']
    }]
  },
  options: {
    plugins: {
      datalabels: {
        color: '#fff'
      }
    }
  }
}

打包进图表URL:

https://quickchart.io/chart?bkg=white&c=%7Btype%3A%27pie%27%2Cdata%3A%7Blabels%3A%5B%27High%27%2C%27Medium%27%2C%27Low%27%5D%2Cdatasets%3A%5B%7Bdata%3A%5B50%2C60%2C70%5D%2CbackgroundColor%3A%5B%27%234e73df%27%2C%27%230f3dc4%27%2C%27%239fb4f3%27%5D%7D%5D%7D%2Coptions%3A%7Bplugins%3A%7Bdatalabels%3A%7Bcolor%3A%27%23fff%27%7D%7D%7D%7D

它看起来像这样：

设置 QuickCharts 颜色

setting QuickCharts color

javascript

charts

pie-chart

chart.js