如何用两条线创建线条图，其中一条被填充，另一个被填写在填充线的前景上？

发布于 2025-02-06 13:19:10 字数 1683 浏览 3 评论 0原文

我有以下图表：

我如何确保蓝线不填充，但同时又留在填充的红线上？

在文档中以行图示例为例，我尝试使用drawtime属性，但是如您所见，蓝线在红色的前景上，但是填充（我希望蓝线在前景上，但没有填充）。

这是我到目前为止所拥有的：

数据：

const data = {
  labels: generateLabels(),
  datasets: [
    {
      label: 'Dataset 1',
      data: generateData(),
      borderColor: Utils.CHART_COLORS.red,
      backgroundColor: Utils.CHART_COLORS.red,
      fill: true
    },
    {
      label: 'Dataset 2',
      data: generateData(),
      borderColor: Utils.CHART_COLORS.blue,
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue),
      // changed `fill` propery from `true` to `false`
      fill: false
    }
  ]
};

配置：

const config = {
  type: 'line',
  data: data,
  options: {
    plugins: {
      filler: {
        propagate: false,
        // added `drawTime` property here
        drawTime: "beforeDraw",
      },
      title: {
        display: true,
        text: (ctx) => 'drawTime: ' + ctx.chart.options.plugins.filler.drawTime
      }
    },
    pointBackgroundColor: '#fff',
    radius: 10,
    interaction: {
      intersect: false,
    }
  },
};

设置：

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));

原文

I have the following chart:

How can I make sure that the the blue line isn't filled, but at the same time, stays on top of the filled red line?

Taking the line chart example from the documentation, I have tried playing around with the drawTime property, but as you can see, the blue line is on the foreground of the red one, but it is filled (I expect the blue line to be on the foreground, but not filled).

Here's what I have so far:

Data:

const data = {
  labels: generateLabels(),
  datasets: [
    {
      label: 'Dataset 1',
      data: generateData(),
      borderColor: Utils.CHART_COLORS.red,
      backgroundColor: Utils.CHART_COLORS.red,
      fill: true
    },
    {
      label: 'Dataset 2',
      data: generateData(),
      borderColor: Utils.CHART_COLORS.blue,
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue),
      // changed `fill` propery from `true` to `false`
      fill: false
    }
  ]
};

Config:

const config = {
  type: 'line',
  data: data,
  options: {
    plugins: {
      filler: {
        propagate: false,
        // added `drawTime` property here
        drawTime: "beforeDraw",
      },
      title: {
        display: true,
        text: (ctx) => 'drawTime: ' + ctx.chart.options.plugins.filler.drawTime
      }
    },
    pointBackgroundColor: '#fff',
    radius: 10,
    interaction: {
      intersect: false,
    }
  },
};

Setup:

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));

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧情别恋 2025-02-13 13:19:10

这似乎是Chart.js本身中的错误。
您有3个选项：

将其固定在图表中
。
等到

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: 'red',
        borderColor: 'red',
        fill: true,
        order: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'blue',
        order: 0
      }
    ]
  },
  options: {}
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

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

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

编辑：
在查看源代码后，似乎确实像是Chart.js中的一个错误，它不会检查是否将填充设置为false，因此始终将填充非默认模式。将为此进行修复，以便将其修复在版本3.8.1中

This seems like a bug in chart.js itself.
You have 3 options:

wait until it is fixed within chart.js itself
write your own custom plugin that does the filling
make use of the order property so the blue line gets drawn on the canvas after the red one like so:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: 'red',
        borderColor: 'red',
        fill: true,
        order: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'blue',
        order: 0
      }
    ]
  },
  options: {}
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

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

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

EDIT:
After looking at the source code it seems indeed like its a bug in chart.js, it does not check if fill has been set to false so it will always fill with the non default modes. Will put in a fix for this so it will be fixed in version 3.8.1

回复收藏 0 原文

~没有更多了~