时间戳

首页 > 解决方案 > 如何在 y 轴中仅设置最小值和最大值（图表 js）

javascript - 如何在 y 轴中仅设置最小值和最大值（图表 js）

问题描述

我有一个问题，我怎样才能制作一个可以以这种方式显示 y 轴的折线图？

我在图片中附上了一个例子

在此处输入图像描述

标签： javascripthtmlchart.js

解决方案

只有当前的主代码才有可能，在 chart.js 的下一个版本之后，使用普通的 CDN 就可以了

当前主分支代码示例：

var options = {
  type: 'line',
  data: {
    labels: ["15/03/2020", "16/03/2020", "17/03/2020", "18/03/2020", "19/03/2020", "20/03/2020", "21/03/2020"],
    datasets: [{
        label: 'Dataset 1',
        data: [10, 30, 50, 20, 25, 44, -10],
        borderColor: 'red',
        backgroundColor: 'red'
      },
      {
        label: 'Dataset 2',
        data: [10, 30, 50, 20, 25, 44, -10],
        borderColor: 'blue',
        backgroundColor: 'blue',
        yAxisID: 'y2',
      }
    ]
  },
  options: {
    scales: {
      y: {
        type: 'linear',
        position: 'left',
        stack: 'demo',
        ticks: {
          min: -20,
          max: 70
        },
        grid: {
          borderColor: 'red'
        },
        title: {
          display: true,
          text: 'title1'
        }
      },
      y2: {
        type: 'linear',
        offset: true,
        position: 'left',
        stack: 'demo',
        ticks: {
          min: -20,
          max: 70
        },
        grid: {
          borderColor: 'blue'
        },
        title: {
          display: true,
          text: 'title2'
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://www.chartjs.org/dist/master/chart.js"></script>
</body>

推荐阅读