Question

我正在使用https://valor-software.com/ng2-charts/生成以下图表。

期望的图形

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

1。）如何自定义图1中显示的X轴标签的位置？

2。）另外，关于在每个条形上方显示值百分比， https://github.com/valor-software/ng2-charts/issues/662帖子仅在鼠标悬停在栏上时起作用。任何解决方案，即使显示工具提示或悬停鼠标，数据仍保留在条形图上。当前在鼠标上方消失了吗？

Answer 1

我认为这对您有帮助。如您所愿。

HTML：

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

您还可以检查以下链接：

链接：https://stackblitz.com/edit/angular-9dcbcf?file=src%2Fapp%2Fapp.component.ts

Ng2-图表+如何自定义X轴标签的位置？

1 个答案: