angularjs - angular-chart.js，如何更改颜色标签

Question

我正在尝试更改 angular-chart.js 中轴标签的颜色。 我阅读了 API，尝试设置聊天颜色，对于栏来说没问题，但我没有找到 x 或 y 标签，它始终是灰色的...谢谢帮助。

<canvas id="bar" class="chart chart-bar" chart-data="main.commissionData"     chart-labels="main.commissionLabels" chart-series="main.commissionSeries" chart-colours="[{fillColor:'rgba(169, 99, 246, 0.8)'},{fillColor:'rgba(179, 173, 57, 1)'}]">
</canvas>

Answer 1

您可以使用图表选项更改轴和标题颜色

HTML 代码

//Added chart-options property for x,y axis color
<canvas id="line" class="chart chart-bar" chart-options = "mychart.options" chart-data="mychart.data" chart-labels="mychart.labels" chart-colors="mychart.colours"></canvas>

Controller 代码

 var json = {
        "series": ["SeriesA"],
        "data": [["90", "99", "80", "91", "76"]],
        "labels": ["01", "02", "03", "04", "05"],
        "colours": [{ // default
            backgroundColor: "#F8D3E0",
            pointBackgroundColor: "#F8D3E0",
            pointHoverBackgroundColor: "#F8D3E0",
            borderColor: "#F8D3E0",
            pointBorderColor: '#F8D3E0',
            pointHoverBorderColor: "#F8D3E0"
        }],
        "options":{
            legend: {
                labels: {
                     fontColor: '#F8D3E0'
                    }
                 },
           title: {
               display: true,
               fontColor: '#F8D3E0', // can Add title color also
               text: 'Custom Chart Title'
           }     ,
           scales: {
               yAxes: [{
                   ticks: {
                       beginAtZero:true,
                       fontColor: '#F8D3E0' // y-Axes color you want to add
                   },
               }],
             xAxes: [{
                   ticks: {
                       fontColor: '#F8D3E0'// y-Axes color you want to add
                   },
               }]
           } 
        }
      };
  $scope.mychart= json;

希望这会有所帮助...