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

问题描述

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

I'm using https://valor-software.com/ng2-charts/ for generating following chart.

期望的图形

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

Actual Graph Right now what I have achieved is following.

1.)如何自定义图1中显示的X轴标签的位置?

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

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

2.) Also regarding displaying the value percentages on top of each bar, https://github.com/valor-software/ng2-charts/issues/662 post helped however works only if mouse hover over the bar. Any solution so that data remains on the bar even if tooltip is displayed or on hover. Currently on mouse over it disappears ?

推荐答案

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

I think this is help you. its working as you expecting.

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

您还可以检查以下链接:

you can also check on link below:

链接

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