Question

目前我在条形图（ng2-charts）上有一条水平线（使用chartjs-plugin-annotation绘制）。该值最初在图表选项“value：25000”中设置并绘制图表，但在新图表数据之后被推送到数据集注释（在ngOnInit方法中），不会使用来自服务器的新数据更新值（图表js不会使用新数据刷新）。

ts文件中的CODE：

    barChartOptions: any = {

    legend: {
      position: 'bottom',
      display:false,
      labels: {
        fontSize: 12
      },
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false,
        },
        scaleLabel: {
          display: true,
        }
      }],
      yAxes: [{
        gridLines: {
          display: true
        },
        scaleLabel: {
          display: true,
        },
        ticks: {
          min: 0,
          stepSize: 50000
        }
      }]
    },
    annotation: {
      annotations: [{
        drawTime: 'afterDatasetsDraw', // overrides annotation.drawTime if set
          id: 'a-line-1', // optional
          type: 'line',
          mode: 'horizontal',
          scaleID: 'y-axis-0',
          value: 25000,
          borderColor: 'red',
          borderWidth: 2,           
      }]
  },
    scaleShowVerticalLines: false,
    responsive: true,
    maintainAspectRatio: false

  }

html中的CODE：

<div class="barchart-details">
      <canvas height="450"
      baseChart 
      [datasets]="barChartData" 
      [labels]="barChartLabels"
      [options]="barChartOptions" 
      [colors]="lineChartColors"
      [legend]="barChartLegend" 
      [chartType]="barChartType" 
      (chartHover)="chartHovered($event)" 
      (chartClick)="chartClicked($event)"></canvas>
    </div>

如何使用从服务器

获取的新数据动态更新属性：'value'

我试过这个----＆gt; this.barChartOptions.annotation.annotations [0] .value = this.dataController.Mydata.value。它不适合我

Answer 1

使用chartJS时，您需要在每次更改时重绘图表。

使用简单的条件应该有效。

动态更新Angular 5中Chart.js的注释插件中水平线的值

1 个答案: