带有填充和线条组合的折线图

Question

我想要填充Group1和Group2。但是，我希望Group3只是一行（没有填充）。但由于Group3的数据介于Group1和Group2的数据之间，因此它们的填充物重叠;因此我甚至看不到Group3。如何将Group3显示为没有填充的行？

  config = {
type: 'line',
data: {
  labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
  datasets: [
    {
      label: 'Tier A',
      data: [-800, -1100, -1150, -1250, -1560, -1460, -1890],
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255,99,132)',
      borderWidth: 1
    },
    {
      label: 'Tier B',
      data: [-1300, -1560, -1380, -2450, -2560, -1860, -3890],
      backgroundColor: 'rgb(54, 162, 235)',
      borderColor: 'rgb(54, 162, 235)',
      borderWidth: 1
    },
    {
      type: 'line',
      label: 'Tier B',
      data: [-1100, -1460, -1280, -1650, -2060, -1560, -2890],
      backgroundColor: 'rgb(255, 206, 86)',
      borderColor: 'rgb(255, 206, 86)',
      borderWidth: 1
    }
  ]
},
options: {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  }
}

};

Answer 1

我想，减轻填充就可以了。我不想减轻填充，但这是我能想到的唯一方法

  config = {
type: 'line',
data: {
  labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
  datasets: [
    {
      label: 'Group1',
      data: [-800, -1100, -1150, -1250, -1560, -1460, -1890],
      backgroundColor: 'rgba(255, 99, 132, 0.3)',
      borderColor: 'rgba(255,99,132, 0.3)',
      borderWidth: 1
    },
    {
      label: 'Group2',
      data: [-1300, -1560, -1380, -2450, -2560, -1860, -3890],
      backgroundColor: 'rgba(54, 162, 235, 0.3)',
      borderColor: 'rgba(54, 162, 235, 0.3)',
      borderWidth: 1
    },
    {
      label: 'Group3',
      fill: false,
      data: [-1100, -1460, -1280, -1650, -2060, -1560, -2890],
      backgroundColor: 'rgb(255, 206, 86)',
      borderColor: 'rgb(255, 206, 86)',
      borderWidth: 4
    }
  ]
},
options: {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  }
}

};