javascript - 为 Chart.js 动态添加颜色

Question

我有一个 Chart.js 项目，下面的代码可以很好地解释。

const response = [ 
   { 
      "mmyy":"2019-12",
      "promocode":"promo1",
      "amount":"2776"
   },
   { 
      "mmyy":"2020-01",
      "promocode":"promo1",
      "amount":"1245"
   },
   { 
      "mmyy":"2020-01",
      "promocode":"promo2",
      "amount":"179"
   }
];

          var chartColors = window.chartColors;
          var color = Chart.helpers.color;

          var colors = [color(chartColors.red).alpha(0.5).rgbString(),
            color(chartColors.orange).alpha(0.5).rgbString(),
            color(chartColors.yellow).alpha(0.5).rgbString(),
            color(chartColors.green).alpha(0.5).rgbString(),
            color(chartColors.blue).alpha(0.5).rgbString()]; 

          var bgColors = [];


const labels = Array.from(new Set(response.map(c => c.mmyy))).sort();
const promocodes = Array.from(new Set(response.map(c => c.promocode))).sort();
const datasets = promocodes.map(pc => ({ label: pc, data: [] }));
labels.forEach(l => {    

    for (let pc of promocodes) {
      let city = response.find(c => c.mmyy == l && c.promocode == pc);
        datasets.find(ds => ds.label == pc).data.push(city ? Number(city.amount) : 0);
    }
});

var ctx = document.getElementById('promorChart').getContext('2d');

var chartColors = window.chartColors;
var color = Chart.helpers.color;

var promorChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: datasets
    },

    options: {
        scales: {
            xAxes: [{
              stacked: false
            }],
            yAxes: [{
              stacked: false,
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, values) {
                        return '$' + value;
                    }
                }
            }]
        },
        tooltips: {
            callbacks: {
                label: function(tooltipItems, data) {
                    return "$" + tooltipItems.yLabel.toString();
                }
            }
        },
        responsive: true,
        elements: {
        }
    }
});

<canvas id="promorChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>

它工作得很好，但正如你所见，它需要一些颜色，所以我试图用这段代码添加一些颜色：

    const labels = Array.from(new Set(response.map(c => c.mmyy))).sort();
const promocodes = Array.from(new Set(response.map(c => c.promocode))).sort();
const datasets = promocodes.map(pc => ({ label: pc, data: [], backgroundColor: bgColors }));
labels.forEach(l => {    

    for (var i = 0; i < labels.count.length; i++) {
            let bgColors = (colors[i % colors.length]);  
    };

    for (let pc of promocodes) {
      let city = response.find(c => c.mmyy == l && c.promocode == pc);
        datasets.find(ds => ds.label == pc).data.push(city ? Number(city.amount) : 0);
    }
});

但这行不通。我收到错误TypeError: undefined is not an object (evaluating 'labels.count.length')有人可以告诉我如何正确地为每个标签添加颜色以正确形成颜色数组吗？谢谢。

标签： javascriptchart.js

Answer 1

在下面的代码片段中，我使用简单的颜色定义来说明它是如何完成的。只需colors用您自己的颜色替换阵列，它应该可以按预期工作。

const response = [{
    "mmyy": "2019-12",
    "promocode": "promo1",
    "amount": "2776"
  },
  {
    "mmyy": "2020-01",
    "promocode": "promo1",
    "amount": "1245"
  },
  {
    "mmyy": "2020-01",
    "promocode": "promo2",
    "amount": "179"
  }
];

const colors = ['red', 'orange', 'yellow', 'green', 'blue']; 
const labels = Array.from(new Set(response.map(c => c.mmyy))).sort();
const promocodes = Array.from(new Set(response.map(c => c.promocode))).sort();
let i = 0; 
const datasets = promocodes.map(pc => ({
  label: pc,
  data: [],
  backgroundColor: colors[i++]
}));
labels.forEach(l => {
  for (let pc of promocodes) {
    let city = response.find(c => c.mmyy == l && c.promocode == pc);
    datasets.find(ds => ds.label == pc).data.push(city ? Number(city.amount) : 0);
  }
});

var ctx = document.getElementById('promorChart').getContext('2d');

var chartColors = window.chartColors;
var color = Chart.helpers.color;

var promorChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: labels,
    datasets: datasets
  },
  options: {
    scales: {
      xAxes: [{
        stacked: false
      }],
      yAxes: [{
        stacked: false,
        ticks: {
          callback: (value, index, values) => '$' + value
        }
      }]
    },
    tooltips: {
      callbacks: {
        label: (tooltipItems, data) => "$" + tooltipItems.yLabel.toString()
      }
    },
    responsive: true,
    elements: {}
  }
});

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