Javascript - ChartJS尝试更改负数的borderColor和填充颜色

agxfikkp  于 2023-02-12  发布在  Chart.js
关注(0)|答案(1)|浏览(189)

我目前正在创建一个带有ChartJ的折线图,它表示某人的利润。这些利润可以是正数也可以是负数。
我希望零上面的线是绿色的,下面的线是红色的。另外,当值为负值时,背景必须是红色的。我已经在Stackoverflow上看到了以前版本的ChartJS的解决方案,但是我认为这个新版本可能会有一个更优雅的版本来解决这个问题。
我使用的是chartJs4.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)',
        },
      },
    ],
  };

下面是实际结果:

最后,这里是我希望它看起来像什么的预览。这是一个实体模型,所以它不是很准确。

你知道我怎样才能重现这个问题吗?在我看来,文档中似乎没有提到这个问题。

quhf5bfb

quhf5bfb1#

开箱即用你将无法做到这一点,最好的是像下面的例子(使用the segementation styling,和一个 * linear color gradient *)。
如果你真的需要这样的外观,你可以检查是否有人创建了插件,或者创建你自己的插件 (或内联插件),这将覆盖正常的渲染。(link to plugin documentation)。

    • 这里有一个演示,我将如何做到这一点:**
  • (基于您发布的配置)*
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: {
            value: -25,
            above: 'rgba(11, 149, 100, 0.08)'
        },
        segment: {
            borderColor: ctx => segmentColor(ctx, '#0B9564', 'red')
        }
      },
    ],
  };
  
function segmentColor(ctx, color1, color2){
    if(ctx.p0.parsed.y < 0 && ctx.p1.parsed.y < 0 ) {
        return color2;
    } else if (ctx.p0.parsed.y < 0){
        var gradient = myChart.ctx.createLinearGradient(ctx.p0.x, ctx.p0.y, ctx.p1.x, ctx.p1.y);
        gradient.addColorStop(.5, color2);
        gradient.addColorStop(1, color1);  
        return gradient
    } else if (ctx.p1.parsed.y < 0){
        var gradient = myChart.ctx.createLinearGradient(ctx.p1.x, ctx.p1.y, ctx.p0.x, ctx.p0.y);
        gradient.addColorStop(.5, color2);
        gradient.addColorStop(1, color1);   
        return gradient
    }
    return color1
}

const config = {
    type: 'line',
    data: lineChartData,
    options: {
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'right',
                labels: {
                    usePointStyle: true,
                },
            }
        },
    }
};

var myChart = new Chart(
    document.getElementById('chart'),
    config
);
<script src="//cdn.jsdelivr.net/npm/chart.js"></script>  

<div class="chart" style="height:184px; width:350px;">
    <canvas  id="chart" ></canvas>
</div>

相关问题