ng2-chart文本标签包装和图形宽度

时间:2017-07-11 19:34:42

标签: chart.js ng2-charts

我一直很难找到能够向我展示如何控制/自定义图表及其属性的所有可能功能的文档。

我想知道我是否在horizontalBar图表中显示数据是否有办法让长标签文字换行?我的图表大小受该功能的影响,我找不到允许我换行标签文字的方法。

我还想知道是否存在属性,以便我可以使用条形控制图形的实际宽度,而不会影响垂直标签宽度。因此,我可以为垂直标签文本提供更多空间,并为图形部分提供更少空间。

以下是我目前正在渲染图表的方式:

barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true,
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero:true,
          max: 100
        }
      }],
        yAxes: [{
          ticks: {

          }
        }]
    },
      tooltips:{
        mode: 'point'
      }
  };
  barChartLabels: string[] = [];
  barChartType: string = 'horizontalBar';
  barChartLegend: boolean = false;
  barChartData: any[] = [];
  data: any;

  colorsOverride: Array<Color> = [{
    backgroundColor: '#6aaf6a',
    hoverBackgroundColor: 'purple'
  }];

    getChartData(link:string){
        this.service.getQuery(link).subscribe(
            data => {
                this.data = data;
                this.barChartLabels = this.data.map(x => x.display);
                this.chartData = this.data.map(x => x.value);
                this.barChartData = [{data: this.chartData, label:'sample' }];
            }
        );
    }

0 个答案:

没有答案