如何更改chartjs / vue-chartjs中某些线的颜色?

bwleehnv  于 2023-02-12  发布在  Chart.js
关注(0)|答案(1)|浏览(207)

我注意到默认的条形图总是有一条较暗的零线。我还注意到-1.0处的水平线也较暗。我希望这些颜色与网格相同。我该怎么做?
下面显示了一个基本示例:https://jsfiddle.net/Lnv3cmz0/1/

  1. Vue.component('chart', {
  2. template:`
  3. <canvas></canvas>
  4. `,
  5. props:['type'],
  6. mounted(){
  7. this._chart = new Chart(this.$el, {
  8. type:this.type,
  9. data:[],
  10. })
  11. },
  12. })
  13. //App setup
  14. new Vue({
  15. el:'#vue',
  16. })

更新:
zeroLine选项似乎不再可用。我使用的是最新/最好的图表(v4.2.0),不再出现此问题。下面是我正在执行的操作的示例

  1. const ctx = document.getElementById('chart') as HTMLCanvasElement;
  2. chart.value = new Chart(ctx, {
  3. type: 'bar',
  4. data: {
  5. datasets: [],
  6. },
  7. options: {
  8. onClick: (evt) => handleOnClick(evt),
  9. interaction: {
  10. mode: 'nearest',
  11. },
  12. plugins: {
  13. legend: {
  14. labels: {
  15. generateLabels(chart) { // other code here }}
  16. }
  17. },
  18. title: {
  19. display: true,
  20. text: 'My Super cool Chart',
  21. },
  22. },
  23. scales: {
  24. x: {
  25. grid: {
  26. color: () => myBackgroundColor,
  27. },
  28. beginAtZero: false,
  29. ticks: {
  30. callback: (value) => doSomethingOnCallaback(value),
  31. // fontColor: myBackgroundColor,
  32. },
  33. type: 'linear',
  34. },
  35. y: {
  36. grid: {
  37. color: () => myBackgroundColor,
  38. },
  39. max: myStart,
  40. min: myEnd,
  41. beginAtZero: false,
  42. ticks: {
  43. callback: (value) => `Tick ${value}`,
  44. stepSize: 15.0,
  45. },
  46. },
  47. },
  48. },
  49. });
p8ekf7hl

p8ekf7hl1#

答案是网格线www.example.com中的zeroLineColorhttps://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

相关问题