使用chart.js更改fontColor和fontSize

时间:2019-06-14 10:04:36

标签: angular chart.js

对不起,我遇到问题,试图将字体颜色更改为所有标签,我阅读了文档,但我真的不太了解, 我搜寻了很多例子,但没有一个为我服务。

这是我在Ts中的代码

public barChartOptions = {
    scaleShowVerticalLines: false,
    responsive: true,
    scaleShowValues: true, 
    animation: {
      onComplete: function () {
          var chartInstance = this.chart,
          ctx = chartInstance.ctx;
          ctx.textAlign = 'center';
          ctx.textBaseline = 'bottom';
          ctx.color = "red";
          ctx.FontSize = '1.1rem';
          this.data.datasets.forEach(function (dataset, i) {
              var meta = chartInstance.controller.getDatasetMeta(i);
              meta.data.forEach(function (bar, index) {
                  var data = dataset.data[index];
                  ctx.fillText(data, bar._model.x, bar._model.y - 5);
              });
          });
      }
  }
  };
  public barChartLabels = ['Linea'];
  public barChartType = 'bar';
  public barChartLegend = {display:true, labels:{fontColor:"red"}};//true
  public barChartData = [
    {data: [93], label: 'Proceso'},
    {data: [64], label: 'Orden y Limpieza'}
  ];
  public barChartFitBars = true;
  public myColors = [
    {
      backgroundColor: 'rgba(103, 58, 183, 0.5)',
      borderColor: 'rgb(103, 58, 183)',
      pointBackgroundColor: 'rgb(103, 58, 183)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(103, 58, 183, .8)'
    },    {
      backgroundColor: 'rgba(255, 255, 183, .5)',
      borderColor: 'rgb(255, 255, 183)',
      pointBackgroundColor: 'rgb(255, 255, 183)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(255, 255, 183, .8)'
    }
  ]

和HTML代码

      <mat-tab label="Indices de Conformidad">
        <div>
          <div style="display: block">
            <canvas baseChart
                    [datasets]="barChartData"
                    [labels]="barChartLabels"
                    [options]="barChartOptions"
                    [legend]="barChartLegend"
                    [chartType]="barChartType"
                    [colors]="myColors">
            </canvas>
          </div>
        </div>
      </mat-tab>

我希望我对自己的解释很好

0 个答案:

没有答案