如何创建包含一条填充折线与一条置于填充折线上方的非填充折线的折线图

Got it, let's sort out this issue for you. The problem you're facing is that even though you set fill: false for the blue dataset, it's still getting filled, and you want it to stay above the red filled line. Here's how to fix it step by step:

Step 1: Stop the Unexpected Fill on the Blue Dataset #

The blue line is being filled because the global drawTime setting in the filler plugin config is interfering with your dataset-level fill: false rule. Let's clean that up:

• Keep fill: false explicitly set for the blue dataset (you already got this right!)
• Remove the global drawTime from the plugins.filler section—we'll handle layer order with dataset-specific draw times instead.

Step 2: Ensure the Blue Line Draws On Top #

To control which layer each dataset sits on, we use Chart.js's drawTime property per dataset:

• For the red (filled) dataset, set drawTime: 'beforeDatasetsDraw'—this makes it render first, so it stays in the background.
• For the blue (unfilled) dataset, use the default drawTime: 'datasetsDraw' (or set it explicitly for clarity). This ensures it renders after the red dataset, putting it on top.

Updated Working Code #

Here's your modified code with these fixes applied:

Data #

const data = {
  labels: generateLabels(),
  datasets: [
    {
      label: 'Dataset 1',
      data: generateData(),
      borderColor: Utils.CHART_COLORS.red,
      backgroundColor: Utils.CHART_COLORS.red,
      fill: true,
      // Draw red dataset first (background layer)
      drawTime: 'beforeDatasetsDraw'
    },
    {
      label: 'Dataset 2',
      data: generateData(),
      borderColor: Utils.CHART_COLORS.blue,
      // No need for backgroundColor since fill is false
      // backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue),
      fill: false,
      // Draw blue dataset after red (foreground layer)
      drawTime: 'datasetsDraw'
    }
  ]
};

Config #

const config = {
  type: 'line',
  data: data,
  options: {
    plugins: {
      filler: {
        propagate: false,
        // Remove global drawTime here—we handle it per dataset
      },
      title: {
        display: true,
        text: (ctx) => 'Blue Line: Unfilled & On Top'
      }
    },
    pointBackgroundColor: '#fff',
    radius: 10,
    interaction: {
      intersect: false,
    }
  },
};

Setup (unchanged) #

const inputs = {
  min: -100,
  max: 100,
  count: 8,
  decimals: 2,
  continuity: 1
};

const generateLabels = () => {
  return Utils.months({count: inputs.count});
};

Utils.srand(3);
const generateData = () => (Utils.numbers(inputs));

Why This Works #

• The red dataset's beforeDatasetsDraw draw time ensures its fill and border render first, sitting behind all other line datasets.
• The blue dataset uses the standard datasetsDraw draw time, which runs after the background layer, so it appears on top.
• Explicit fill: false on the blue dataset guarantees no fill is applied, even with the filler plugin enabled.

内容的提问来源于stack exchange，提问作者ryanzidago