ChartJS 图表刻度,x轴:类型“_DeepPartialObject”上不存在属性“title

sigwle7e  于 2023-02-19  发布在  Chart.js
关注(0)|答案(1)|浏览(157)

我已经从chartjs v2.8.0升级到4.2.1,我试图在折线图中设置图例标题,但是我得到了这个vscode错误...

然而,如果我看对象,title似乎肯定在那里...

任何想法,为什么我得到这个类型的错误,或者替代如何设置图例文本(动态)?

[更新1]

作为额外信息,以下是我如何设置图表(在Angular 组件中)

/**
   * Create the chart and empty data object
   */
  private createChart(): void {
    if (this.chart !== undefined) {
      return;
    }

    Chart.register(LineController, PointElement, Tooltip, Legend, TimeScale, LinearScale, CategoryScale, LinearScale, LineElement);

    this.chartData = {
      datasets: [{
        fill: false, // shading under the line
        data: []
      }]
    };

    const options: ChartOptions = {
      plugins: {
      legend: {
        display: false,
        labels: {
          padding: 10
        }
      }
    },
      elements: {
        line: {
          borderColor: this.lineColour // line colour
        }
      },
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        x: {
          ticks: {
            source: 'auto',
            maxRotation: 60,
            minRotation: 60,
            autoSkip: true,
          },

          grid: {
            color: this.gridLinesColor
          },

          //label: { labelString: '', display: true },

          type: 'time',
          display: true,
          position: 'bottom',
          time: {
            unit: 'minute',
            displayFormats: {
              minute: this.runtimeStatusService.getCacheTimePattern()
            }
          }
        },
        y: 
          {
            
            min: 0,            
            grid: {
              color: this.gridLinesColor,
            },            
          }
        
      }
    };

    this.chart = new Chart(this.chartRef.nativeElement, {
      type: 'line',
      data: this.chartData,
      options
    });
  }

这就是我用来设置x轴图例文本的方法(在v2中)

this.chart.config.options.scales.xAxes[0].scaleLabel.labelString = legendText;

它以前是这样出现的...

我只想在v4中做同样的事情

u4dcyp6a

u4dcyp6a1#

我发现现在添加一个图表标题就可以完成我所追求的目标。
首先我在登记簿上加上头衔。

Chart.register(LineController, PointElement, Tooltip, Legend, Title /* <-- add this **/, TimeScale, LinearScale, CategoryScale, LinearScale, LineElement);

接下来,我将标题添加到插件中...

const options: ChartOptions = {
  plugins: {
    legend: {
      display: false,  <---- HIDE THIS
      position: 'bottom',
      labels: {
        padding: 10,            
      }
    },
    title: {
      display: true,     <---- SHOW THIS
      position: 'bottom',
      text: ''
    },        
},

现在我可以在运行时设置标题...

this.chart.config.options.plugins.title.text = 'hello';

对我来说,这就是我所追求的...

相关问题