Charts.JS酒吧沒有交替的顏色

我試圖交替酒吧的顏色爲基礎關閉，如果它是12或13，這是我的語法我已經發布，並且圖表顯示與數據&酒吧，但所有酒吧是藍色的，而不是交替的。Charts.JS酒吧沒有交替的顏色

什麼是我的語法問題，防止酒吧交替顏色？

<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'; 
      }); 
     } 
    }] 
});

來源

2017-08-03 Yohan Greenburg

什麼在「salesbyperson」變量，所以我們可以看到數據？ –

@EzraFree - 它是一個Javascript數組var salesbyperson = [21,31,21,16,22,24]; –

這是因爲，你已經放置了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>

來源

2017-08-03 16:12:08

這給了我一個錯誤，無法讀取undefiend的屬性數據。 –

已更新。現在檢查！ –

仍然會出現相同的錯誤。 –

Charts.JS酒吧沒有交替的顏色

回答

相關問題