Question

如果它是12或13，我试图替换条形的颜色，这是我发布的语法，图表显示数据＆amp;酒吧，但所有的酒吧都是蓝色的，而不是交替的。

我的语法问题是什么阻止条纹交替出现？

    <script>
    var mainlabels = ["Jose 12", "Jose 13", "Jay 12", "Jay 13", "Rob 12", "Rob 13"];
var salesbyperson = [21,31,21,16,22,24];
    var ctx = document.getElementById('canvasone').getContext('2d');
    var chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: mainlabels,
            datasets: [{
                    label: 'Sum of Sales',
                    backgroundColor: 'rgba(0, 129, 214, 0.8)',
                    data: salesbyperson
                }]
        },
        options: {
            tooltips: {
                callbacks: {
                    label: function (t, d) {
                        if (t.datasetIndex === 1) {
                            var xLabel = d.datasets[t.datasetIndex].label;
                            var yLabel = t.yLabel + '%';
                            return xLabel + ': ' + yLabel;
                        } else if (t.datasetIndex === 0) {
                            var xLabel = d.datasets[t.datasetIndex].label;
                            var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
                            return xLabel + ': ' + yLabel;
                        }
                    }
                }
                },
                legend: {
                    display: false,
                    position: 'top',
                },
                scales: {
                    yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                callback: function (value, index, values) {
                                    if (parseInt(value) >= 1000) {
                                        return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                                    } else {
                                        return '$' + value;
                                    }
                                }
                            }
                        }]
                },
                plugins: [{
                        beforeDraw: function (chart) {
                            var labels = chart.data.labels;
                            labels.forEach(function (e, i) {
                                var bar = chart.data.datasets[0]._meta[0].data[i]._model;
                                var dataPoint = e.split(/\s/)[1];
                                if (dataPoint === '12')
                                    bar.backgroundColor = 'blue';
                                else if (dataPoint === '13')
                                    bar.backgroundColor = 'green';
                            });
                        }
                    }]
            }
    });
</script>

编辑
已编辑的语法仍然显示错误

var mainlabels = ["Jose 12", "Jose 13", "Jay 12", "Jay 13", "Rob 12", "Rob 13"];
var salesbyperson = [21, 31, 21, 16, 22, 24];
var ctx = document.getElementById('canvasone').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: mainlabels,
        datasets: [{
            label: 'Sum of Sales',
            backgroundColor: 'rgba(0, 129, 214, 0.8)',
            data: salesbyperson
        }]
    },
    options: {
        tooltips: {
            callbacks: {
                label: function (t, d) {
                    var xLabel = d.datasets[t.datasetIndex].label;
                    var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
                    return xLabel + ': ' + yLabel;
                }
            }
        },
        legend: {
            display: false,
            position: 'top',
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    callback: function (value, index, values) {
                        if (parseInt(value) >= 1000) {
                            return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                        } else {
                            return '$' + value;
                        }
                    }
                }
            }]
        }
    },
    plugins: [{
        beforeDraw: function (chart) {
            var labels = chart.data.labels;
            labels.forEach(function (e, i) {
                var bar = chart.data.datasets[0]._meta['0'].data[i]._model;
                var dataPoint = e.split(/\s/)[1];
                if (dataPoint === '12')
                    bar.backgroundColor = 'blue';
                else if (dataPoint === '13')
                    bar.backgroundColor = 'green';
            });
        }
    }]
});

Answer 1

这是因为您在图表选项中放置了 plugins 数组，而应该在图表选项后面（外部）。

以下是您的代码的工作版本：

var mainlabels = ["Jose 12", "Jose 13", "Jay 12", "Jay 13", "Rob 12", "Rob 13"];
var salesbyperson = [21, 31, 21, 16, 22, 24];
var ctx = document.getElementById('canvasone').getContext('2d');
var chart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: mainlabels,
      datasets: [{
         label: 'Sum of Sales',
         backgroundColor: 'rgba(0, 129, 214, 0.8)',
         data: salesbyperson
      }]
   },
   options: {
      tooltips: {
         callbacks: {
            label: function(t, d) {
               if (t.datasetIndex === 1) {
                  var xLabel = d.datasets[t.datasetIndex].label;
                  var yLabel = t.yLabel + '%';
                  return xLabel + ': ' + yLabel;
               } else if (t.datasetIndex === 0) {
                  var xLabel = d.datasets[t.datasetIndex].label;
                  var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
                  return xLabel + ': ' + yLabel;
               }
            }
         }
      },
      legend: {
         display: false,
         position: 'top',
      },
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true,
               callback: function(value, index, values) {
                  if (parseInt(value) >= 1000) {
                     return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                  } else {
                     return '$' + value;
                  }
               }
            }
         }]
      }
   },
   plugins: [{
      beforeDraw: function(chart) {
         var labels = chart.data.labels;
         labels.forEach(function(e, i) {
            var bar = chart.data.datasets[0]._meta['0'].data[i]._model;
            var dataPoint = e.split(/\s/)[1];
            if (dataPoint === '12')
               bar.backgroundColor = 'blue';
            else if (dataPoint === '13')
               bar.backgroundColor = 'green';
         });
      }
   }]
});

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

Charts.JS条形图不是交替颜色

1 个答案: