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

时间:2016-04-01 09:59:19

标签: angularjs chart.js

我正在尝试更改angular-chart.js中轴标签的颜色。 我读了API,我尝试设置聊天颜色,这对于酒吧来说还不错,但是我找不到x或y标签,它总是灰色的... thx求助

<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>

2 个答案:

答案 0 :(得分:0)

尝试将此添加到您的控制器:

var data = [
    {
        color: "rgb(134, 202,54)",
        highlight: "rgb(100,100,100)"
    },
 ]

答案 1 :(得分:0)

您可以使用chart-options

更改轴和标题的颜色

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>

控制器代码

 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;

希望这会有所帮助...