AngularNgbar聊天工具提示值不能設定為小數點

我正在將我的 angular 專案用于ngChartjs我在工具提示值上有一些沖突

去前 6131327.319655154，我嘗試6131327.31 使用以下代碼執行此操作，但無法正常作業。

tooltips: {
      callbacks: {
        label(tooltipItem, data) {
          return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3}) (?!\d))/g, ','); }, },
    },

我的代碼

html

<canvas ngChartjs
                [datasets]="barChartData"
                [labels]="barChartLabels"
                [options]="barChartOptions"
                [colors]="barChartColors"
                [legend]="barChartLegend"
                [chartType]="barChartType"
                [colors]="colors">
        </canvas>

.ts // 條形圖

 public colors = [
    { backgroundColor: '#29aae2' },
    // { backgroundColor: '#7f9ebc' },
  ];
  barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true,
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: false,
          labelString: 'Month'
        },
        gridLines: false,
        ticks: {
          display: true,
          beginAtZero: true,
          fontSize: 13,
          padding: 10
        }
      }],
      yAxes: [{
        display: true,
        scaleLabel: {
          display: false,
          labelString: 'Value',
        },

        gridLines: {
          drawBorder: false,
          offsetGridLines: false,
          drawTicks: false,
          borderDash: [3, 4],
          zeroLineWidth: 1,
          zeroLineBorderDash: [3, 4]
        },
        tooltips: {
          callbacks: {
            label(tooltipItem, data) {
              return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3}) (?!\d))/g, ','); }, },
        },
        ticks: {
          /*    max: 100,*/
          // stepSize: 20,
          display: true,
          beginAtZero: true,
          fontSize: 13,
          padding: 10,
          // stepSize: 100000,
          callback(value) {
            const ranges = [
              { divider: 1e6, suffix: 'M' },
              { divider: 1e3, suffix: 'k' }
            ];
            function formatNumber(n) {
              // tslint:disable-next-line:prefer-for-of
              for (let i = 0; i < ranges.length; i  ) {
                if (n >= ranges[i].divider) {
                  return (n / ranges[i].divider).toString()   ranges[i].suffix;
                }
              }
              return n;
            }
            return ' '   formatNumber(value);
          }

        }
      }]
    }
  };
  barChartLabels: string[] = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  barChartType = 'bar';
  barChartLegend = true;
  barChartColors: Array<any> = [
    {
      backgroundColor: this.themeColors.blue,
      borderWidth: 0
    },
    {
      backgroundColor: this.themeColors.blueLight,
      borderWidth: 0
    }
  ];
  barChartData: any[] = [
    {
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      label: '2020',
      categoryPercentage: 0.70,
      barPercentage: 0.70,
    },
    {
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      label: '2021',
      categoryPercentage: 0.70,
      barPercentage: 0.70,
    }
  ];

有人知道一些解決方案嗎？

納克斯

uj5u.com熱心網友回復：

在我的情況下，它與添加toFixed(2) 一起作業

callbacks: {
          label: function(tooltipItem, data) {
              return tooltipItem.yLabel.toFixed(2).replace(/\d(?=(\d{3}) \.)/g, '$&,');
          }
      }

標籤：有角的 打字稿 图表 图表

上一篇：父級橫向滾動，子級縱向滾動

下一篇：這兩個SQLite查詢會產生相同的結果嗎？