Chart.js 如何在chartjs栏中定义每个栏的起始位置

Chart.js 如何在chartjs栏中定义每个栏的起始位置,chart.js,bar-chart,linechart,react-chartjs,Chart.js,Bar Chart,Linechart,React Chartjs,我试图建立一个类似于图中的图形 但是我找不到正确的方法,我想在同一个轴上连接线和条,对于每个条,我想定义起始Y位置和结束Y位置,我尝试使用多轴来做,但没有成功,我尝试的是类似的 const data = { labels: ['January', 'February', 'March', 'April', 'May', 'June', July'], datasets: [{ label: 'Sales', type:'line',

我试图建立一个类似于图中的图形

但是我找不到正确的方法,我想在同一个轴上连接线和条,对于每个条,我想定义起始Y位置和结束Y位置,我尝试使用多轴来做,但没有成功,我尝试的是类似的

    const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', July'],
     datasets: [{
      label: 'Sales',
      type:'line',
      data: [51, 65, 40, 49, 60, 37, 40],
      fill: false,
      borderColor: '#EC932F',
      backgroundColor: '#EC932F',
      pointBorderColor: '#EC932F',
      pointBackgroundColor: '#EC932F',
      pointHoverBackgroundColor: '#EC932F',
      pointHoverBorderColor: '#EC932F',
      yAxisID: 'y-axis-2'
    },{
      type: 'bar',
      label: 'Visitor',
      data: [200, 185, 590, 621, 250, 400, 95],
      fill: false,
      backgroundColor: '#71B37C',
      borderColor: '#71B37C',
      hoverBackgroundColor: '#71B37C',
      hoverBorderColor: '#71B37C',
      yAxisID: 'y-axis-1'
    }]
};

const options = {
  responsive: true,
  tooltips: {
    mode: 'label'
  },
  elements: {
    line: {
      fill: false
    }
  },
  scales: {
    xAxes: [
      {
        display: true,
        gridLines: {
          display: false
        },
        labels: {
          show: true
        }
      }
    ],
    yAxes: [
      {
        type: 'linear',
        display: true,
        position: 'left',
        id: 'y-axis-1',
        gridLines: {
          display: false
        },
        labels: {
          show: true
        }
      },
      {
        type: 'linear',
        display: true,
        position: 'right',
        id: 'y-axis-2',
        gridLines: {
          display: false
        },
        labels: {
          show: true
        }
      }
    ]
  }
};
但这样,将有两个轴,一个在左侧,另一个在右侧,但都从相同的位置开始