ng2-charts + 如何自定义X轴标签的位置? [英] Ng2-charts + How to customize the position of X axis labels?

问题描述

我正在使用

实际图表现在我所取得的成就如下.

Expected Graph

1.) 如上图#1所示，如何自定义X轴标签的位置?

Actual Graph Right now what I have achieved is following.

2.) 另外关于在每个条形顶部显示值百分比，https://github.com/valor-software/ng2-charts/issues/但是，662 帖子只有在鼠标悬停在栏上时才有效.任何解决方案，即使显示工具提示或悬停，数据仍保留在栏上.目前鼠标悬停会消失吗?

1.) How to customize the position of X axis labels as above displayed in Graph #1 ?

推荐答案

我想这对你有帮助.它按您的预期工作.

解决方案

HTML:

HTML: 

<div style="显示:块">

<div> <div style="display: block"> <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas> </div> <button (click)="randomize()">Update</button> </div>

TS:

public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011'];
  public barChartType:string = 'bar';
  public barChartLegend:boolean = true;


 public barChartOptions: any = {
    responsive: true,
    tooltips: {
      enabled: false
    },
    animation: {
      onComplete: function () {
        var ctx = this.chart.ctx;
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        var chart = this;
        var datasets = this.config.data.datasets;

        datasets.forEach(function (dataset: Array<any>, i: number) {
          ctx.font = "10px Arial";


          ctx.fillStyle = "Black";
          chart.getDatasetMeta(i).data.forEach(function (p: any, j: any) {
            ctx.fillText(datasets[i].data[j], p._model.x, p._model.y - 20);
          });

        });
      }
    },
    legend: {
      display: true,
      labels: {
        fontColor: '#4286f4',
        backgroundColor: '#4286f4'
      }
    },
    scales: {
     yAxes: [
      {
          display: true,
          ticks: {
            min: 0,
            max: 100,
            stepSize: 100,
          },
          gridLines: {
                offsetGridLines: false
            }
      }
    ],
  }
  }

  public barChartData:any[] = [
    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'}
  ];

  // events
  public chartClicked(e:any):void {
    console.log(e);
  }

  public chartHovered(e:any):void {
    console.log(e);
  }

  public randomize():void {
    // Only Change 3 values
    let data = [
      Math.round(Math.random() * 100),
      59,
      80,
      (Math.random() * 100),
      56,
      (Math.random() * 100),
      40];
    let clone = JSON.parse(JSON.stringify(this.barChartData));
    clone[0].data = data;
    this.barChartData = clone;
  }

您也可以查看以下链接:

you can also check on link below:

链接

这篇关于ng2-charts + 如何自定义X轴标签的位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！