我的React应用程序使用react-chartjs-2(而react-chartjs-2使用最新的Chart.js 2.7.2)。我正在尝试创建堆叠折线图,在倒数第二个和最后一个x轴标签之间使用不同样式的部分,如下例所示:
react-chartjs-2
如何才能做到这一点?
xghobddn1#
我自己解决了这个问题,将堆叠线数据分成2个数据集,在同一个图/轴上绘制为单独的堆叠图(通过在单个图表的数据对象中包含2个单独的数据集)。
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, } }, };
2条答案
按热度按时间xghobddn1#
我自己解决了这个问题,将堆叠线数据分成2个数据集,在同一个图/轴上绘制为单独的堆叠图(通过在单个图表的数据对象中包含2个单独的数据集)。
ne5o7dgx2#
@Izzi(来自评论)下面是一个例子:
与示例链接:https://www.chartjs.org/docs/latest/samples/area/line-boundaries.html
将此配置粘贴到上面链接的网站上的编辑器中:
数据
配置