具有不同样式区段的Chart.js堆栈折缐图

5f0d552i  于 2022-11-23  发布在  Chart.js
关注(0)|答案(2)|浏览(146)

我的React应用程序使用react-chartjs-2(而react-chartjs-2使用最新的Chart.js 2.7.2)。我正在尝试创建堆叠折线图,在倒数第二个和最后一个x轴标签之间使用不同样式的部分,如下例所示:

如何才能做到这一点?

xghobddn

xghobddn1#

我自己解决了这个问题,将堆叠线数据分成2个数据集,在同一个图/轴上绘制为单独的堆叠图(通过在单个图表的数据对象中包含2个单独的数据集)。

ne5o7dgx

ne5o7dgx2#

@Izzi(来自评论)下面是一个例子:

与示例链接:https://www.chartjs.org/docs/latest/samples/area/line-boundaries.html
将此配置粘贴到上面链接的网站上的编辑器中:

数据

const data = {
  labels: generateLabels(),
  datasets: [
    {
      label: 'Data A',
      data: [40.96,89.06,65.46,45.46,89.55,54.52,71.24,89.1],
      borderColor: Utils.CHART_COLORS.red,
      backgroundColor: Utils.CHART_COLORS.red,
      // look at this setting
      fill: 'origin'
    },
    {
      label: 'Data B',
      data: [20.96,65.06,15.46,34.46,53.55,24.52,31.24,59.1],
      borderColor: Utils.CHART_COLORS.blue,
      backgroundColor: Utils.CHART_COLORS.blue,
      fill: 'origin'
    },
    {
      label: 'Data C',
      data: [20.96,65.06,15.46,34.46,53.55,24.52,31.24,59.1],
      borderColor: Utils.CHART_COLORS.green,
      backgroundColor: Utils.CHART_COLORS.green,
      fill: 'origin'
    }
  ]
};

配置

const config = {
  type: 'line',
  data: data,
  options: {
    scales: {
      y: {
        // look at this setting
        stacked: true,
      }
    },
    plugins: {
      filler: {
        propagate: false,
      },
      title: {
        display: true,
        text: (ctx) => 'Fill: ' + ctx.chart.data.datasets[0].fill
      }
    },
    interaction: {
      intersect: false,
    }
  },
};

相关问题