Apexcharts - 如何更改 y 轴步长值和工具提示不显示字符串

Question

我正在使用apexcharts.js。我在我的页面上使用以下代码。我有两个问题

1. 如何改变y轴步长值？截至目前，正在讨论20。

2. 在工具提示中，我没有得到字符串。它只是显示数字。

var options = {
  series: [{
    data: ["30 lac", "40 lac", "35 lac", "50 lac", "49 lac", "60 lac", "70 lac", "91 lac", "125 lac"]
  }],
  chart: {
    height: 350,
    type: 'bar',
    events: {
      click: function(chart, w, e) {
        // console.log(chart, w, e)
      }
    }
  },
  //colors: colors,
  plotOptions: {
    bar: {
      columnWidth: '45%',
      distributed: true,
    }
  },
  dataLabels: {
    enabled: false
  },
  legend: {
    show: false
  },
  xaxis: {
    categories: [10, 20, 30, 40, 50, 60, 70, 80, 90],
    labels: {
      style: {
        // colors: colors,
        fontSize: '12px'
      }
    }
  },
  yaxis: {
    min: 0,
    max: 200
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

#chart {
  max-width: 650px;
  margin: 35px auto;
}

<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

Answer 1

1. 您可以使用https://apexcharts.com/docs/options/yaxis/#tickAmount更改间隔数tickAmount

2. 使用tooltip formatter https://apexcharts.com/docs/options/tooltip/#yformatter

      var options = {
    series: [{
      data: ["30 lac", "40 lac", "35 lac", "50 lac", "49 lac", "60 lac", "70 lac", "91 lac", "125 lac"]
    }],
    chart: {
      height: 350,
      type: 'bar',
      events: {
        click: function (chart, w, e) {
          // console.log(chart, w, e)
        }
      }
    },
    //colors: colors,
    plotOptions: {
      bar: {
        columnWidth: '45%',
        distributed: true,
      }
    },
    dataLabels: {
      enabled: false
    },
    legend: {
      show: false
    },
    tooltip: {
      y: {
        formatter: function (value, {dataPointIndex, w}) {
          return w.config.series[0].data[dataPointIndex]
          //or you can judt add 'lac' to value
          //return `${value} lac`
        }
      }
    },
    xaxis: {
      categories: [10, 20, 30, 40, 50, 60, 70, 80, 90],
      labels: {
        style: {
          // colors: colors,
          fontSize: '12px'
        }
      }
    },
    yaxis: {
      min: 0,
      max: 200,
      tickAmount: 4,
    }
  };

  var chart = new ApexCharts(document.querySelector("#chart"), options);
  chart.render();

#chart {
  max-width: 650px;
  margin: 35px auto;
}

<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>