图表 js y 轴整数 - Javascript

当我们使用 JavaScript 来创建图表时，我们希望能够控制 Y 轴的整数值。为了控制 Y 轴的整数值，我们可以使用一些库，例如 Chart.js，HighCharts，D3.js 等。

Chart.js

要在 Chart.js 中控制 Y 轴的整数值，我们需要使用一些配置选项。下面是一个使用 Chart.js 控制 Y 轴整数值的例子：

var chartData = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    label: 'My First dataset',
    backgroundColor: 'rgba(255,99,132,0.2)',
    borderColor: 'rgba(255,99,132,1)',
    borderWidth: 1,
    data: [5, 10, 15, 20, 25, 30, 35]
  }]
};

var chartOptions = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero:true,
        stepSize: 5
      }
    }]
  }
};

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: chartData,
  options: chartOptions
});

在上面的例子中，我们使用了 stepSize 选项来控制 Y 轴的整数值，具体数值可以根据数据情况进行调整。

HighCharts

在 HighCharts 中控制 Y 轴整数值也非常容易。下面是一个使用 HighCharts 控制 Y 轴整数值的例子：

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Fruit Consumption'
  },
  xAxis: {
    categories: ['Apples', 'Bananas', 'Oranges']
  },
  yAxis: {
    title: {
      text: 'Fruit eaten'
    },
    tickInterval: 5
  },
  series: [{
    name: 'Jane',
    data: [1, 0, 4]
  }, {
    name: 'John',
    data: [5, 7, 3]
  }]
});

在上面的例子中，我们使用了 tickInterval 选项来控制 Y 轴的整数值，具体数值可以根据数据情况进行调整。

D3.js

在 D3.js 中控制 Y 轴整数值稍微有些不同。下面是一个使用 D3.js 控制 Y 轴整数值的例子：

var data = [5, 10, 15, 20, 25, 30, 35];

var svg = d3.select("body").append("svg")
  .attr("width", 500)
  .attr("height", 500);

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([0, 500]);

var yAxis = d3.axisLeft()
  .scale(yScale)
  .ticks(5);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);

在上面的例子中，我们使用了 ticks 选项来控制 Y 轴的整数值，具体数值可以根据数据情况进行调整。

总结：以上是控制 JavaScript 图表中 Y 轴整数值的一些方法，可以根据个人喜好和需要进行选取使用。