亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

定期更改同一數據集的某些條形的顏色 Chartjs

定期更改同一數據集的某些條形的顏色 Chartjs

動漫人物 2022-09-29 10:19:45
我正在嘗試在我的條形圖上每五個條形更改同一數據集的兩個條形的顏色。我想要這樣的東西:紅色紅色藍色藍色藍色藍色紅色紅色藍色...目前我有以下代碼:    var chart = new Chart(ctx, {    type: 'bar',    data: {        labels: labels,        datasets: [{            label: 'dataset1',            fill: false,            // i want this to be red 2 times every 5 bars            backgroundColor: 'rgb(255,204,100)',            borderColor: 'rgb(255,204,100)',            hoverBackgroundColor: 'rgb(156,94,0)',            hoverBorderColor: 'rgb(156,94,0)',            data: data        } ]    },    options: {        responsive: true        //more code...    }});
查看完整描述

1 回答

?
湖上湖

TA貢獻2003條經驗 獲得超2個贊

您可以只設置為與條形圖數據具有相同長度的顏色數組。backgroundColor


例如:


const config = {

  type: 'bar',

  data: {

    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],

    datasets: [

      {

        label: 'Dataset 1',

        backgroundColor: ['red', 'red', 'blue', 'blue', 'blue', 'red', 'red'],

        borderWidth: 1,

        data: [-3, 30, -10, 33, -9, 14, -11],

      }

    ],

  },

  options: {

    legend: {

      display: false

    }

  }

};


const ctx = document.getElementById('canvas').getContext('2d');

new Chart(ctx, config);

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

<body>

    <canvas id="canvas" width="600" height="400"></canvas>

</body>


查看完整回答
反對 回復 2022-09-29
  • 1 回答
  • 0 關注
  • 50 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號