Question

我遇到NG2-Charts模块的问题，它是charts.js的ngular包装器。我试图给我的图表提供的选项似乎都没有。我可以毫无问题地更改颜色，标签和数据。

除了我从关闭

添加一些选项外，我的代码与line-chart example完全相同

标记：

<h2 class="page-header">Pie Bakery</h2>
<div class="container piechart">
    <div class="row">
        <div class="col-md-6">
          <div style="display: block;">
<!-- Rendering canvas chart -->
          <canvas baseChart width="400" height="400"
                      [datasets]="lineChartData"
                      [labels]="lineChartLabels"
                      [options]="lineChartOptions"
                      [colors]="lineChartColors"
                      [legend]="lineChartLegend"
                      [chartType]="lineChartType"
                      (chartHover)="chartHovered($event)"
                      (chartClick)="chartClicked($event)"></canvas>
<!-- Done rendering canvas chart -->
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 10px">
          <table class="table table-responsive table-condensed">
            <tr>
              <th *ngFor="let label of lineChartLabels">{{label}}</th>
            </tr>
            <tr *ngFor="let d of lineChartData">
              <td *ngFor="let label of lineChartLabels; let j=index">{{d && d.data[j]}}</td>
            </tr>
          </table>
          <button (click)="randomize()">CLICK</button>
        </div>
      </div>  
</div>

打字稿：

// lineChart
  public lineChartData:Array<any> = [
    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
    {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
  ];

  public lineChartLabels:Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  public lineChartOptions:any = {
    responsive: true, // <- Without this the graph seems responsive as well.
    animation: false, // <- added more options.
    mode: 'nearest',
    cubicInterpolationMode: 'monotone',
    pointBorderColor: 'rgba(250, 0, 0,1)',
    lineTension: 0
  };  

  public lineChartColors:Array<any> = [
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },
    { // dark grey
      backgroundColor: 'rgba(77,83,96,0.2)',
      borderColor: 'rgba(77,83,96,1)',
      pointBackgroundColor: 'rgba(77,83,96,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(77,83,96,1)'
    },
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    }
  ];

  public lineChartLegend:boolean = true;
  public lineChartType:string = 'line';

  public randomize():void {
    let _lineChartData:Array<any> = new Array(this.lineChartData.length);
    for (let i = 0; i < this.lineChartData.length; i++) {
      _lineChartData[i] = {data: new Array(this.lineChartData[i].data.length), label: this.lineChartData[i].label};
      for (let j = 0; j < this.lineChartData[i].data.length; j++) {
        _lineChartData[i].data[j] = Math.floor((Math.random() * 100) + 1);
      }
    }
    this.lineChartData = _lineChartData;
  }

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

    public chartHovered(e:any):void {
      console.log(e); // does not get called either.
    }

默认图表呈现正常，随机化按钮也可以。然而，单独添加不同的选项或像上面一样添加选项并没有任何区别。

有一个old git issue from early 2016解决了“某些”选项无效的问题。最终问题因为更新修复而被关闭。我尝试使用charts.js和NG2-Charts模块的不同版本，但没有结果。

图表选项不起作用？

0 个答案: