javascript - 如何在折线/条形混合图表 (Chart.js) 中从左侧 Y 轴开始折线图？

Question

我需要折线图从左 y 轴开始。这是一个 link to JSFiddle .是否有可能以某种方式“破解”线从那里开始而不会弄乱条形图？

    datasets: [{
        type: 'line',
        label: 'A',
        yAxisID: 'A',
        fill: false,
        data: [60, 80, 90, 80, 80, 60, 50],
        backgroundColor: 'rgba(255, 0, 0, 1)',
        borderColor: 'rgba(255, 0, 0, 1)',
        radius: 0
    }

Answer 1

您可以将其与隐藏的第二个 x 轴匹配:
V3 示例:

var ctx = document.getElementById("canvas");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Mon', 'Tue', 'Wen', 'Thu', 'Fri', 'Sat', 'Sun'],
    datasets: [{
      type: 'line',
      label: 'A',
      data: [60, 80, 90, 80, 80, 60, 50],
      backgroundColor: 'rgba(255, 0, 0, 1)',
      borderColor: 'rgba(255, 0, 0, 1)',
      radius: 0,
      xAxisID: 'secondX'
    }, {
      type: 'bar',
      label: 'B',
      yAxisID: 'yB',
      data: [5, 2, 1, 3, 4, 5, 6],
      backgroundColor: [
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)'
      ]
    }]
  },
  options: {
    scales: {
      x: {},
      secondX: {
        axis: 'x',
        offset: false,
        display: false
      },
      y: {
        type: 'linear',
        position: 'left',
        ticks: {
          max: 100,
          min: 0
        }
      },
      yB: {
        position: 'right',
        ticks: {
          max: 10,
          min: 0
        }
      }
    }
  }
});

<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>

V2 示例:

var ctx = document.getElementById("canvas");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Mon', 'Tue', 'Wen', 'Thu', 'Fri', 'Sat', 'Sun'],
    datasets: [{
      type: 'line',
      label: 'A',
      yAxisID: 'A',
      fill: false,
      data: [60, 80, 90, 80, 80, 60, 50],
      backgroundColor: 'rgba(255, 0, 0, 1)',
      borderColor: 'rgba(255, 0, 0, 1)',
      radius: 0,
      xAxisID: 'second'
    }, {
      type: 'bar',
      label: 'B',
      yAxisID: 'B',
      data: [5, 2, 1, 3, 4, 5, 6],
      backgroundColor: [
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)'
      ]
    }]
  },
  options: {
    scales: {
      xAxes: [{}, {
        id: 'second',
        display: false
      }],
      yAxes: [{
        id: 'A',
        type: 'linear',
        position: 'left',
        ticks: {
          max: 100,
          min: 0
        }
      }, {
        id: 'B',
        position: 'right',
        ticks: {
          max: 10,
          min: 0
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
<canvas id="canvas"></canvas>