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

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
      }
    }]
  }
}

};

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

Line chart with combination of fill and line

chart.js

chart.js2