我目前正在创建一个带有ChartJ的折线图,它表示某人的利润。这些利润可以是正数也可以是负数。
我希望零上面的线是绿色的,下面的线是红色的。另外,当值为负值时,背景必须是红色的。我已经在Stackoverflow上看到了以前版本的ChartJS的解决方案,但是我认为这个新版本可能会有一个更优雅的版本来解决这个问题。
我使用的是chartJs
的4.2.0
版本。
以下是我迄今为止根据文档所做的工作:
const lineChartData = {
labels: [
'01/22',
'02/22',
'03/22',
'04/22',
'05/22',
'06/22',
'07/22',
'08/22',
],
datasets: [
{
label: 'Profit',
data: [2.4, 2.6, 2.23, 1.2, -2.2, -3.6, -1, 0.2],
borderColor: '#0B9564',
pointBackgroundColor: 'transparent',
pointBorderColor: 'transparent',
borderJoinStyle: 'bevel',
fill: {
target: 'origin',
above: 'rgba(11, 149, 100, 0.08)',
below: 'rgba(218, 96, 96, 0.08)',
},
},
],
};
下面是实际结果:
最后,这里是我希望它看起来像什么的预览。这是一个实体模型,所以它不是很准确。
你知道我怎样才能重现这个问题吗?在我看来,文档中似乎没有提到这个问题。
1条答案
按热度按时间quhf5bfb1#
开箱即用你将无法做到这一点,最好的是像下面的例子(使用the segementation styling,和一个 * linear color gradient *)。
如果你真的需要这样的外观,你可以检查是否有人创建了插件,或者创建你自己的插件 (或内联插件),这将覆盖正常的渲染。(link to plugin documentation)。