如何在Chart.js折线图上自定义y轴标签？

Question

我有以下图表，想手动设置Y轴标签。 而不是使用1,2,3,4,5，我想要一，二，三，四，五 有没有办法做到这一点？ 这是我的选项结构：

options = {
  scales: {
    yAxes: [{
      scaleLabel: { labelString: ["One", "Two", "Three", "Four", "Five"] },
      ticks: { min: 1, max: 5, stepSize: 1, suggestedMin: 0.5, suggestedMax: 5.5},
      gridLines: {display: false}
    }]
   },
 };

Answer 1

在ticks对象中，您可以传递callback，该ticks: { min: 0, max: 5, stepSize: 1, suggestedMin: 0.5, suggestedMax: 5.5, callback: function(label, index, labels) { switch (label) { case 0: return 'ZERO'; case 1: return 'ONE'; case 2: return 'TWO'; case 3: return 'THREE'; case 4: return 'FOUR'; case 5: return 'FIVE'; } } } 将获得将要显示的标签。从这里你只需要返回一个你希望显示的字符串来代替标签。

fiddle exampe

    @Override
    protected void onResume() {
        super.onResume();
        if (getAirlineProfile().isStocksEnabled()) {
            stockDao = new StockDao(CouchManager.OPERATIONAL_DB, MIUtils.getOperationalDatabaseIndexMap());
            if (getAirlineProfile().isStocksEnabled()) {
                flightKeys = MIUtils.getFlightKeyList(stockDao, getAirlineIataCode());
            }
        }
        this.continueWithSelectedDate = false;
        this.flightDataValid = false;
        if (getMiApplication().getBuildDate() != null) {
            // setup required dates
            today = Calendar.getInstance();
            apkDate = Calendar.getInstance();
            apkDate.setTime(getMiApplication().getBuildDate());
        } else {
            this.dateValidationsEnabled = false;
        }
        isFlightDateValid();
        @SuppressWarnings("unchecked")
        Optional<FlightLegIdentifier> flightLegIdentifier =
                (Optional<FlightLegIdentifier>) getIntent().getExtras().get(FLIGHT_LEG_IDENTIFIER);

        flightPrefix.setText(getAirlineProfile().getAirlineIataCode());

        if (flightLegIdentifier.isPresent()) {
           FlightLegIdentifier fli = flightLegIdentifier.get();
            flightOrigin.setText(fli.getOrigin());
            flightDestination.setText(fli.getDestination());
            flightOriginCityName.setText(getCityNameByAirportCode(fli.getOrigin()));
            flightDestinationCityName.setText(getCityNameByAirportCode(fli.getDestination()));
            flightNumber.setText("" + fli.getFlightNumberDigits());
            LocalDate date = fli.getDate();
            flightDate.set(date.getYear(), date.getMonthOfYear() - 1, date.getDayOfMonth());
            flightDateButton.setText(DateFormat.format(DATE_FORMAT, flightDate.getTime()));
                        passengerInput.setText(getFlsIfAvailable(fli).getNumberOfPassengers());

        }
}