Javascript Charts.JS条不交替颜色

我正在尝试根据12或13来交替条形图的颜色，这是我发布的语法，图表显示的是数据和条形图，但所有条形图均为蓝色，不交替

什么是我的语法问题，阻止酒吧交替颜色

    <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=[“何塞12”、“何塞13”、“杰伊12”、“杰伊13”、“罗伯12”、“罗伯13”]；
var salesbyperson=[21,31,21,16,22,24]；
var ctx=document.getElementById（'canvasone'）.getContext（'2d'）；
var图表=新图表（ctx{
类型：'bar'，
数据：{
标签：主标签，
数据集：[{
标签：“销售总额”，
背景颜色：“rgba（0，129，214，0.8）”，
资料来源：salesbyperson
}]
},
选项：{
工具提示：{
回调：{
标签：功能（t，d）{
如果（t.datasetIndex==1）{
var xLabel=d.datasets[t.datasetIndex].label；
var yLabel=t.yLabel+'%'；
返回xLabel+'：'+yLabel；
}else if（t.datasetIndex==0）{
var xLabel=d.datasets[t.datasetIndex].label；
var yLabel=t.yLabel>=1000？'$'+t.yLabel.toString（）。替换（/\B（？=（\d{3}）+（？！\d））/g，“，”：'$'+t.yLabel；
返回xLabel+'：'+yLabel；
}
}
}
},
图例：{
显示：假，
位置：'顶部'，
},
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的，
回调：函数（值、索引、值）{
如果（parseInt（值）>=1000）{
返回“$”+value.toString（）。替换（/\B（？=（\d{3}）+（？！\d））/g，“，”；
}否则{
返回“$”+值；
}
}
}
}]
}
},
插件：[{
绘制前：函数（图表）{
var标签=chart.data.labels；
标签.forEach（函数（e，i）{
var bar=图表.数据.数据集[0]。_元[0'].数据[i]。_模型；
var dataPoint=e.split（/\s/）[1]；
如果（数据点=='12'）
bar.backgroundColor='蓝色'；
else if（数据点=='13'）
bar.backgroundColor='绿色'；
});
}
}]
});

salesbyperson变量中有什么，我们可以看到数据？@EzraFree-它是一个Javascript数组var salesbyperson=[21,31,21,16,22,24]；这给了我一个错误，无法读取未定义的属性数据。是的，我读取了。我在这一行if（t.datasetIndex==1）上得到了一个错误，所以我删除了if-else块，只显式地设置了var xLabel。。。。。现在我在}]after data后面直接出现了一个错误：SalesByPerson刚刚编辑了OP，或者您可以在这里查看：---是的，这在之前是有效的。我看不出有什么问题。它工作得很好。见-。您可能在其他地方有语法错误。它必须是分钟的，因为当我运行语法时，它现在将显示一个无错误的图表，但所有图表都是蓝色的
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';
            });
        }
    }]
});