Question

我们具有的值在加载网站时会有所不同，我们希望动态设置刻度步长。我们在同一张图中有两个具有不同单位的数据集，并希望水平网格线彼此匹配。一方面，它是从0-100％以20为步长的比例。另一方面，我们希望最大值为10的倍数，并将步长设置为最大值的1/5（因此，网格线应该彼此匹配）。但是，除非加载类型为“ 10”（请参见id：“ B”）之类的修订，否则不会加载stepsize。我们试图用一个类变量来动态设置它，但是没有用。我们使用Angular5和ng2-charts库

public averageOptions: any = {
legend: {
  labels: {
    fontColor: 'rgb(255,255,255)',
    fontSize: 15
  }
},
scales: {
  yAxes: [{
    id: 'A',
    type: 'linear',
    position: 'left',
    ticks: {
      min: 0,
      max: 100,
      stepSize: 20,
      fontColor: 'rgb(255,255,255)',
      fontSize: 15,
      callback: function (value) {
        return value + '%';
      }
    },
    gridLines: {
      zeroLineColor: 'rgb(255,255,255)',
      color: 'rgb(255,255,255)'
    }
  }, {
    id: 'B',
    type: 'linear',
    position: 'right',
    ticks: {
      min: this.totalVotesMin,
      max: this.totalVotesMax,
      fontColor: 'rgb(255,255,255)',
      fontSize: 15,
      stepSize: 10
    },
    gridLines: {
      zeroLineColor: 'rgb(255,255,255)',
      color: 'rgb(255,255,255)'
    }
  }],
  xAxes: [{
    ticks: {
      fontColor: 'rgb(255,255,255)',
      fontSize: 15
    },
    gridLines: {
      zeroLineColor: 'rgb(255,255,255)',
      color: 'rgb(255,255,255)'
    }
  }]
}
  };

我们找到了一个与此相关的主题，但是由于没有相关文档，我们不知道tick数组的外观或设置方式： Chart.js - Setting max Y axis value and keeping steps correct

Answer 1

这似乎很长，但是您可以使用以下代码根据输入数据来更改步长和最大值。

ticks: {
            min: 0,
            callback: function(value, index, values) {
                if (Math.floor(value) === value) {
                    return value;
                }
            }
      }

Answer 2

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "line-chart",
  templateUrl: "./line-chart.component.html"
})
export class LineChartComponent implements OnInit {
  public seriesB: Array<number> = [
    59.023,
    59.023,
    59.034,
    59.034,
    59.034,
    59.039,
    59.05,
    59.061,
    59.088,
    59.104,
    500
  ];
   public seriesC: Array<number> = [
    1,
    59.023,
    59.034,
    59.034,
    59.034,
    59.039,
    59.05,
    59.061,
    59.088,
    59.104,
    300
  ];

  public lineChartLabels: Array<any> = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July"
  ];

  public lineChartOptions: any = {
    title: {
      display: true,
      text: "Line Chart Example"
    },
    legend: {
      position: "bottom"
    },
    scales: {
      yAxes: [`k`
        {
          id: "SeriesB",
          ticks: {
          stepSize: 84,
          min:0
          }
        },
      ]
    }
  };
 public lineChartOptions1: any = {
    title: {
      display: true,
      text: "Line Chart Example"
    },
    legend: {
      position: "bottom"
    },
    scales: {
      yAxes: [
        {
          id: "SeriesC",
          ticks: {
          stepSize: 50,
          min:0
          }
        },
      ]
    }
  };

  public lineChartColors: Array<any> = [
    {
      backgroundColor: "rgba(255,255,255,0.2)",
      borderColor: "rgba(1,1,1)"
    }
  ];

  public lineChartData: Array<any> = [
    // {data: this.seriesA, label: 'SeriesA', yAxisID: 'SeriesA'},
    { data: this.seriesB, label: "SeriesB", yAxisID: "SeriesB" },
    // {data: this.seriesC, label: 'SeriesC', yAxisID: 'SeriesC'}
  ];
   public lineChartData1: Array<any> = [
    // {data: this.seriesA, label: 'SeriesA', yAxisID: 'SeriesA'},
    { data: this.seriesC, label: "SeriesC", yAxisID: "SeriesC" }
    // {data: this.seriesC, label: 'SeriesC', yAxisID: 'SeriesC'}
  ];

  public lineChartLegend: boolean = true;

  public lineChartType: string = "line";

  ngOnInit(): void {
    this.lineChartOptions.scales.yAxes[0].ticks.suggestedMin = Math.floor(
      Math.min(...this.seriesB)
    );
    this.lineChartOptions.scales.yAxes[0].ticks.suggestedMax = Math.ceil(
      Math.max(...this.seriesB)
    );
     this.lineChartOptions.scales.yAxes[0].ticks.suggestedMin = Math.floor(
      Math.min(...this.seriesC)
    );
    this.lineChartOptions.scales.yAxes[0].ticks.suggestedMax = Math.ceil(
      Math.max(...this.seriesC)
    );
  }
}

如何使用chart.js动态设置轴上的刻度？

2 个答案: