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

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

使用 Chart.js 更改度量單位的顏色

使用 Chart.js 更改度量單位的顏色

倚天杖 2022-01-01 20:28:02
我正在使用 Chart.js 創建一個條形圖。購物車后面是深綠色背景,因此很難看到顯示在 y 和 x 軸上的黑色數字。這是我生成圖表的方式:document.getElementsByClassName("home-message")[0].innerHTML='<canvas id="myChart" width="400" height="400"></canvas>'var ctx = document.getElementById('myChart').getContext('2d');var myChart = new Chart(ctx, {    type: 'bar',color: 'white',    data: {        labels: ['Bar', 'Mensa', 'Ingresso'],        datasets: [{            label: 'Prodotti venduti',            borderColor: 'rgba(255, 255, 255)',            data: [551, 1470, 2354],            backgroundColor: [                'rgba(255, 99, 132)',                'rgba(54, 162, 235)',                'rgba(255, 206, 86)'            ],            borderWidth: 1        }]    },    options: {        scales: {yAxes: [{ticks: {beginAtZero: true}}]},        legend: {display: false, labels: {fontColor: 'white'}},        title: {display: true,text: 'Custom Chart Title'}    }});我查看了有關如何自定義圖表的Chart.js 頁面,但我沒有找到任何可以更改這些數字顏色的內容。 如果您不知道我在說什么數字,請查看此圖片有沒有辦法將這些數字的顏色更改為白色?
查看完整描述

2 回答

?
一只名叫tom的貓

TA貢獻1906條經驗 獲得超3個贊

您可以更改圖表多個部分的顏色:


GridLines(圖表中的垂直或水平線):


gridLines: { 

  color: '#5555ff'

}

蜱(你說的數字):


ticks: {

  fontColor: '#5555ff'

},

ScaleLabels(軸的名稱及其值):


scaleLabel: {

  fontColor: '#5555ff'

}

這些都是您可以在軸的選項中指定的選項。


options: {

  scales: {

    xAxes: [{

      // You insert the above code here

    ]}

  }

}

編輯:這是我用我使用的代碼描述的選項的圖片:

http://img1.sycdn.imooc.com//61d048fc0001373608040802.jpg

xAxes: [{

  ticks: {

    fontColor: 'red'

  },

  gridLines: {

    color: 'blue'

  },

  scaleLabel: {

    display: true,

    labelString: 'Employee',

    fontSize: 20.0,

    fontColor: 'green'

  }

}]


查看完整回答
反對 回復 2022-01-01
?
慕娘9325324

TA貢獻1783條經驗 獲得超5個贊

試試這個


...

options: {

   scales: {

          yAxes: [{gridLines: { color: "#ffffff" },

                   scaleLabel: {

                            display: true,

                            fontColor:'#ffffff',

                            fontSize:12

                        },}]

          }

}

..


查看完整回答
反對 回復 2022-01-01
  • 2 回答
  • 0 關注
  • 276 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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