时间戳

首页 > 解决方案 > 将 X 轴值的颜色更改为多颜色值 - Chart.js

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

问题描述

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

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 是黑色

我可以这样做吗？如何？

标签： javascriptjquerychart.js

解决方案

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

推荐阅读