Question

我正在尝试用两个数据集渲染一个折线图我的示例图表

 <canvas id="myChart"></canvas>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',

        // The data for our dataset
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
             datasets: [
                {
                    label: 'My First dataset',
                    borderColor: 'rgb(255, 99, 132)',
                    fill: false,
                    data: [9000, 9020, 9010, 9004, 9011, 9040, 9050]
                },
                {
                    label: 'My Second dataset',
                    borderColor: 'rgb(0, 99, 132)',
                    fill: false,
                    data: [1000, 1020, 1010, 1004, 1011, 1040, 1050]
                }
            ]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        stepSize: 10
                    }
                }]
            }
        }
    });

</script>

这是目前的样子current result

如果它有这样的轴中断，这个图表将很容易阅读 expected result

Answer 1

没有内置的方法可以做到这一点。您能做的最好的事情是使用第二个 Y 轴并将第二个数据集链接到其他轴。

datasets: [
        {
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1,
        yAxisID: 'first'
        },  
            {
                label: '# of Points',
                data: [7, 11, 5, 8, 3, 7],
                borderWidth: 1,
        yAxisID: 'second'
            }
        ]

options: {
    scales: {
        yAxes: [{
        id: 'first'
      },{
        id: 'second'
      }]
    }
  }

折线图chart.js中的y轴

1 个答案: