Question

我有一个带有双轴的简单chart.js图表。为了提高可读性，我想对图表和比例尺数据进行颜色协调。这可能吗？

例如，在下面的示例中，我希望左侧的温度值显示为红色，而右侧的SG值显示为蓝色。

我尝试在特定轴选项下添加fontColor和scaleFontColor选项，但是没有运气。

这是我的代码：

var canvas = document.getElementById('myChart');

var chartData = {
  labels: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri'],
  datasets: [{
    label: 'Temp F',
    yAxisID: 'F',
    display: true,
    fill: false,
    borderColor: '#ff6384', //red
    data: [100, 96, 84, 76, 69]
  }, {
    //type: 'line',
    label: 'Gravity',
    yAxisID: 'G',
    display: true,
    fill: false,
    borderColor: '#36a2eb', //blue
    data: [1.07, 1.055, 1.020, 1.015, 1.012]
  }]
};

var myChart = new Chart(canvas, {
  type: 'line',
  data: chartData,
  options: {
    title: {
      display: true,
      text: 'Mmm Beer!'
    },
    scales: {
      yAxes: [{
        id: 'F',
        position: 'left',
        scaleFontColor: '#ff6384', //red
        ticks: {
          suggestedMin: 32,
          suggestedMax: 100
        }
      }, {
        id: 'G',
        position: 'right',
        ticks: {
          suggestedMin: 1,
          suggestedMax: 1.1
        },
        gridLines: {
          drawOnChartArea: false, // only want the grid lines for one axis to show up
        },
      }]
    }
  }
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div>
  <canvas id="myChart"></canvas>
</div>

Answer 1

我想我已经解决了问题。当您尝试更改两个Y轴值的颜色时。您需要为特定的fontColor在ticks对象内添加yAxes属性。然后，将所需的任何颜色值分配给fontColor对象的ticks属性。

在此处查找更改

var canvas = document.getElementById('myChart');

var chartData = {
  labels: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri'],
  datasets: [{
    label: 'Temp F',
    yAxisID: 'F',
    display: true,
    fill: false,
    borderColor: '#ff6384', //red
    data: [100, 96, 84, 76, 69]
  }, {
    //type: 'line',
    label: 'Gravity',
    yAxisID: 'G',
    display: true,
    fill: false,
    borderColor: '#36a2eb', //blue
    data: [1.07, 1.055, 1.020, 1.015, 1.012]
  }]
};

// @ts-ignore
var myChart = new Chart(canvas, {
  type: 'line',
  data: chartData,
  options: {
    title: {
      display: true,
      text: 'Mmm Beer!'
    },
    scales: {
      yAxes: [{
        id: 'F',
        position: 'left',
        ticks: {
          fontColor: '#ff6384', //red
          suggestedMin: 32,
          suggestedMax: 100
        }
      }, {
        id: 'G',
        position: 'right',
        ticks: {
          fontColor: '#36a2eb', //blue
          suggestedMin: 1,
          suggestedMax: 1.1
        },
        gridLines: {
          drawOnChartArea: false, // only want the grid lines for one axis to show up
        },
      }]
    }
  }
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div>
  <canvas class=".content" id="myChart"></canvas>
</div>

希望，这会对您有所帮助。谢谢！

您可以在Chart.js中为不同的轴设置不同的颜色吗？

1 个答案: