将 X 轴值的颜色更改为多颜色值 - Chart.js

Posted 2023-03-06

【中文标题】将 X 轴值的颜色更改为多颜色值 - Chart.js

【英文标题】：Change color of X axis values to multi color values - Chart.js

【发布时间】：2019-06-28 23:16:22

【问题描述】：

我正在使用 Chart.js (http://www.chartjs.org/docs/) 绘制图表。 我的类型 Chart 是 Bar。

X 轴的标签有 4 行。 I 更改 X 轴值的颜色。值的颜色是一种颜色。 但我希望每种颜色有一条线，并且颜色与条形颜色相同。

var barChartData = 
    labels: [["Injection", 10, 20], // here I want to change the color
        ["Electronics", 5, 15],
        ["TOTAL", 15, 35]
    ],
    datasets: [
        label: "2018",
        backgroundColor: window.chartColors.orange,
        yAxisID: 'A',
        data: [10, 5, 15]
    , 
        label: "2017",
        backgroundColor: window.chartColors.green,
        yAxisID: 'A',
        data: [20, 15, 35]
    ]
 ;

var canvas = document.getElementById('canvas').getContext('2d');
new Chart(canvas, 
    type: 'bar',
    data: barChartData,
    options: 
        scales: 
            yAxes: [
                id: 'A',
                type: 'linear',
                position: 'left',
            , 
                id: 'B',
                type: 'linear',
                position: 'right',
                ticks: 
                    max: 100,
                    min: 0
                
            ],
            xAxes: [
                ticks: 
                    fontColor: "#222", // This here that I changed.
                ,
            ]
        
    
)

我想更改标签的颜色，10、5、15 为橙色，20、15、35 为绿色，Injection、Electronics、TOTAL 为黑色

我可以这样做吗？怎么样？

【参考方案1】：

var myData = [
  ["id1","test 11111","AA",1.95],
  ["id2","test 2","BB",1.94],
  ["id3","test 3","CC",1.93],
  ["id4","test 4","DD",1.93],
  ["id5","test 5","EE",1.91],
  ["id6","test 6","FF",1.90],
  ["id7","test 7","GG",1.82],
  ["id8","test 8","HH",1.85],
  ["id9","test 9","II",1.83],
  ["id10","test 10","JJ",1.79]
];


var ctx = $("#c");
var myChart = new Chart(ctx, 
  type: 'bar',
  data: 
    datasets: [
      label: '# of Votes',
      xAxisID:'modelAxis',
      data: myData.map((entry)=>entry[3])
    ]
  ,
  options:
    scales:
      xAxes:[
        
          id:'modelAxis',
          type:"category",
          ticks:
            //maxRotation:0,
            autoSkip: false,
            callback:function(label, x2, x3, x4)
              return label;
            
                   ,
         labels:myData.map((entry=>entry[1]))
        ,
        
          id:'groupAxis',
          type:"category",
          gridLines: 
            display: false,
            drawBorder: false,
            drawOnChartArea: false,
            offsetGridLines: false
          ,
          ticks:
            padding:0,
            maxRotation:0,
            fontSize: 10,
            fontColor: '#FF9090',
            autoSkip: false,
            callback:function(label)
                return label;
            
          ,
          offset: true,
          labels:myData.map((entry=>entry[1]))

        ,
          id:'groupAxis2',
          type:"category",
          gridLines: 
            display: false,
            drawBorder: false,
            drawOnChartArea: false,
            offsetGridLines: false
          ,
          scaleLabel: 
            padding: 10,
          ,
          ticks:
            padding:0,
            fontSize: 10,
            fontColor: '#AB64F4',
            maxRotation:0,
            autoSkip: false,
            callback:function(label)
                return label;
            
          ,
          offset: true,
          labels:myData.map((entry=>entry[1]))

        
        ],
      yAxes:[
        ticks:
          beginAtZero:true
        
      ]
    
  
);