Javascript Chart.js线，负点的不同填充颜色

当点为负值时，我需要更改Line Chart.js中的填充颜色（内部区域）

代码简单而基本：

$(document).ready(function(){

  var ctx = $("#myChart").get(0).getContext("2d");

  var data = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
          {
              label: "My First dataset",
              //fillColor : "rgba(60,91,87,1)",
              // String - the color to fill the area under the line with if fill is true
              backgroundColor: "rgba(75,192,192,0.4)",
              strokeColor : "rgba(60,91,87,1)",
              pointColor : "rgba(60,91,87,1)",
              pointStrokeColor : "#58606d",
              // The actual data
              data: [65, 59, 80, -81, 56, 55, -40],

              // String - If specified, binds the dataset to a certain y-axis. If not specified, the first y-axis is used. First id is y-axis-0
              yAxisID: "y-axis-0",
          }
      ]
  };

  var options = {
      scales: {
          yAxes: [{
              display: true,
              ticks: {
                  suggestedMin: 0,    // minimum will be 0, unless there is a lower value.
                  // OR //
                  beginAtZero: true   // minimum value will be 0.
              }
          }]
      }
  };

  var myLineChart = new Chart(ctx, {
      type: 'line',
      data: data,
      options: options
  });

//  myLineChart.data.datasets[0].metaDataset._points[3]._model.backgroundColor = "red";
//  if (myLineChart.datasets[0].points[4].value < 0) {
//    myLineChart.datasets[0].points[4].fillColor =  "red";
//    myLineChart.update();
// }
})

$（文档）.ready（函数（）{
var ctx=$（“#myChart”）.get（0.getContext（“2d”）；
风险值数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
标签：“我的第一个数据集”，
//fillColor:“rgba（60,91,87,1）”，
//字符串-如果填充为真，则填充线条下区域的颜色
背景颜色：“rgba（75192192,0.4）”，
strokeColor:“rgba（60,91,87,1）”，
点颜色：“rgba（60,91,87,1）”，
pointStrokeColor:#58606d“，
//实际数据
数据：[65,59,80，-81,56,55，-40]，
//字符串-如果指定，则将数据集绑定到某个y轴。如果未指定，则使用第一个y轴。第一个id为y轴-0
yAxisID:“y轴-0”，
}
]
};
变量选项={
比例：{
雅克斯：[{
显示：对，
滴答声：{
suggestedMin:0，//最小值将为0，除非有较低的值。
//或//
beginAtZero:true//最小值将为0。
}
}]
}
};
var myLineChart=新图表（ctx{
键入：“行”，
数据：数据，
选项：选项
});
//myLineChart.data.datasets[0].metaDataset.\u points[3]。\u model.backgroundColor=“红色”；
//if（myLineChart.dataset[0]。点[4]。值<0）{
//myLineChart.Dataset[0]。点[4]。fillColor=“红色”；
//myLineChart.update（）；
// }
})

我试图得到这个结果：

---

您可以扩展折线图来执行此操作

---

预览

---

脚本

Chart.defaults.NegativeTransparentLine = Chart.helpers.clone(Chart.defaults.line);
Chart.controllers.NegativeTransparentLine = Chart.controllers.line.extend({
    update: function () {
        // get the min and max values
        var min = Math.min.apply(null, this.chart.data.datasets[0].data);
        var max = Math.max.apply(null, this.chart.data.datasets[0].data);
        var yScale = this.getScaleForId(this.getDataset().yAxisID);

        // figure out the pixels for these and the value 0
        var top = yScale.getPixelForValue(max);
        var zero = yScale.getPixelForValue(0);
        var bottom = yScale.getPixelForValue(min);

        // build a gradient that switches color at the 0 point
        var ctx = this.chart.chart.ctx;
        var gradient = ctx.createLinearGradient(0, top, 0, bottom);
        var ratio = Math.min((zero - top) / (bottom - top), 1);
        gradient.addColorStop(0, 'rgba(75,192,192,0.4)');
        gradient.addColorStop(ratio, 'rgba(75,192,192,0.4)');
        gradient.addColorStop(ratio, 'rgba(0,0,0,0)');
        gradient.addColorStop(1, 'rgba(0,0,0,0)');
        this.chart.data.datasets[0].backgroundColor = gradient;

        return Chart.controllers.line.prototype.update.apply(this, arguments);
    }
});

然后

 ...
 var myLineChart = new Chart(ctx, {
     type: 'NegativeTransparentLine',
     data: {
     ...

---

Fiddle-

要获得上面的@potatopeelings代码以使用chart.js 2.5.x，您需要在数据集中添加yAxisID:'y-axis-0'，如下所示

var myLineChart = new Chart(ctx, {
  type: 'NegativeTransparentLine',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      yAxisID : 'y-axis-0',
      ....

---

@如果数据集数据格式为

[1,2,3，…]

格式，则potatopeelings代码将起作用

如果数据格式为

[{x:1，y:1}，…]

格式，则需要将

var min

和

var max

更改为：

    var min = this.chart.data.datasets[0].data.reduce((min, p) => p.y < min ? p.y : min, this.chart.data.datasets[0].data[0].y);
    var max = this.chart.data.datasets[0].data.reduce((max, p) => p.y > max ? p.y : max, this.chart.data.datasets[0].data[0].y);

var min=this.chart.data.datasets[0].data.reduce（（min，p）=>p.yp.y>max？p.y:max，this.chart.data.datasets[0].data[0].y）；

---

在ChartJS 2.7.3上测试，我更新了该方法以处理多个数据集

Chart.defaults.NegativeTransparentLine = Chart.helpers.clone(Chart.defaults.line);
    Chart.controllers.NegativeTransparentLine = Chart.controllers.line.extend({
        update: function () {
          for(let i=0; i< this.chart.data.datasets.length; i++) {
            // get the min and max values
            var min = Math.min.apply(null, this.chart.data.datasets[i].data);
            var max = Math.max.apply(null, this.chart.data.datasets[i].data);
            var yScale = this.getScaleForId(this.chart.data.datasets[i].yAxisID);

            // figure out the pixels for these and the value 0
            var top = yScale.getPixelForValue(max);
            var zero = yScale.getPixelForValue(0);
            var bottom = yScale.getPixelForValue(min);

            // build a gradient that switches color at the 0 point
            var ctx = this.chart.chart.ctx;
            var gradient = ctx.createLinearGradient(0, top, 0, bottom);
            var ratio = Math.min((zero - top) / (bottom - top), 1);
            gradient.addColorStop(0, 'rgba(55,210,99,0.4)');
            gradient.addColorStop(ratio, 'rgba(55,210,99,0.4)');
            gradient.addColorStop(ratio, 'rgba(247,100,120,0.4)');
            gradient.addColorStop(1, 'rgba(247,100,120,0.4)');
            this.chart.data.datasets[i].backgroundColor = gradient;
          }
          return Chart.controllers.line.prototype.update.apply(this, arguments);
        }
    });

Chart.defaults.NegativeTransparentLine=Chart.helpers.clone（Chart.defaults.line）；
Chart.controllers.NegativeTransparentLine=Chart.controllers.line.extend({
更新：函数（）{
for（设i=0；i

在chart.js 2.8.0的Angular 8上测试

import { Component, OnInit, ViewChild } from '@angular/core';
import { Chart, ChartDataSets, ChartOptions } from 'chart.js';
import { Color, Label } from 'ng2-charts';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public lineChartData: ChartDataSets[] = [
    { data: [89, 0, -80, 81, 56, -55, 40], label: 'Series A', yAxisID: 'y-axis-0' },
    { data: [-890, 0, 800, -810, -560, 550, -400], label: 'Series B', yAxisID: 'y-axis-0' },
  ];
  public lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  public lineChartOptions: (ChartOptions & { annotation: any }) = {
    responsive: true,
  };
  public lineChartColors: Color[] = [
    {
      backgroundColor: 'rgba(255,0,0,0.3)',
    },
    {
      backgroundColor: 'rgba(0,255,0,0.3)',
    },
  ];
  public lineChartLegend = true;
  public lineChartType = 'line';
  public lineChartPlugins = [];

  constructor() {
    Chart.defaults.NegativeTransparentLine = Chart.helpers.clone(Chart.defaults.line);
    Chart.controllers.NegativeTransparentLine = Chart.controllers.line.extend({
        update: function () {
          for(let i=0; i< this.chart.data.datasets.length; i++) {
            // get the min and max values
            var min = Math.min.apply(null, this.chart.data.datasets[i].data);
            var max = Math.max.apply(null, this.chart.data.datasets[i].data);
            var yScale = this.getScaleForId(this.chart.data.datasets[i].yAxisID);

            // figure out the pixels for these and the value 0
            var top = yScale.getPixelForValue(max);
            var zero = yScale.getPixelForValue(0);
            var bottom = yScale.getPixelForValue(min);

            // build a gradient that switches color at the 0 point
            var ctx = this.chart.chart.ctx;
            var gradient = ctx.createLinearGradient(0, top, 0, bottom);
            var ratio = Math.min((zero - top) / (bottom - top), 1);
            gradient.addColorStop(0, 'rgba(55,210,99,0.4)');
            gradient.addColorStop(ratio, 'rgba(55,210,99,0.4)');
            gradient.addColorStop(ratio, 'rgba(247,100,120,0.4)');
            gradient.addColorStop(1, 'rgba(247,100,120,0.4)');
            this.chart.data.datasets[i].backgroundColor = gradient;
          }
          return Chart.controllers.line.prototype.update.apply(this, arguments);
        }
    });
    this.lineChartType = 'NegativeTransparentLine';
  }

  ngOnInit() {
  }
}

从'@angular/core'导入{Component，OnInit，ViewChild}；
从“Chart.js”导入{Chart，chartDataSet，ChartOptions}；
从“ng2图表”导入{Color，Label}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
公共lineChartData:ChartDataSets[]=[
{数据：[89,0，-80,81,56，-55,40]，标签：'Series A'，yAxisID:'y轴-0'}，
{数据：[-890,0800，-810，-560,550，-400]，标签：'Series B'，yAxisID:'y-axis-0'}，
];
公共线形图标签：标签[]=['1月'、'2月'、'3月'、'4月'、'5月'、'6月'、'7月']；
公共lineChartOptions:（ChartOptions&{annotation:any}）={
回答：是的，
};
公共线条图颜色：颜色[]=[
{
背景颜色：“rgba（255,0,0,0.3）”，
},
{
背景颜色：“rgba（0255,0,0.3）”，
},
];
公共lineChartLegend=true；
公共线形图表类型='line'；
公共lineChartPlugins=[]；
构造函数（）{
Chart.defaults.NegativeTransparentLine=Chart.helpers.clone（Chart.defaults.line）；
Chart.controllers.NegativeTransparentLine=Chart.controllers.line.extend({
更新：函数（）{
for（设i=0；i<div style="display: block;">
  <canvas baseChart width="400" height="400"
    [datasets]="lineChartData"
    [labels]="lineChartLabels"
    [options]="lineChartOptions"
    [colors]="lineChartColors"
    [legend]="lineChartLegend"
    [chartType]="lineChartType"
    [plugins]="lineChartPlugins">
  </canvas>
</div>

Chart.defaults.NegativeTransparentLine = Chart.helpers.clone(Chart.defaults.line);
Chart.controllers.NegativeTransparentLine = Chart.controllers.line.extend({
update: function () {
// get the min and max values
var min = Math.min.apply(null, this.chart.data.datasets[0].data);
var max = Math.max.apply(null, this.chart.data.datasets[0].data);
var yScale = this.getScaleForId(this.getDataset().yAxisID);

// figure out the pixels for these and the value 0
var top = yScale.getPixelForValue(max);
var zero = yScale.getPixelForValue(0);
var bottom = yScale.getPixelForValue(min);

// build a gradient that switches color at the 0 point
var ctx = this.chart.chart.ctx;
var gradient = ctx.createLinearGradient(0, top, 0, bottom);
var ratio = Math.min((zero - top) / (bottom - top), 1);
if(ratio < 0){
    
    ratio = 0;
    gradient.addColorStop(1, 'rgba(0,255,0,1)');
}else if(ratio == 1){
    gradient.addColorStop(1, 'rgba(255,0,0,1)');
}else{
    gradient.addColorStop(0, 'rgba(255,0,0,1)');
    gradient.addColorStop(ratio, 'rgba(255,0,0,1)');
    gradient.addColorStop(ratio, 'rgba(0,255,0,1)');
    gradient.addColorStop(1, 'rgba(0,255,0,1)');
}
console.log(ratio)
this.chart.data.datasets[0].backgroundColor = gradient;

return Chart.controllers.line.prototype.update.apply(this, arguments);
}
});

  new Chart(document.querySelector(`canvas`), {
    type: 'line',
    data: {
    labels: your_labels,
    datasets: [{
      data: your_data
    }]
  },
  options: {
    maintainAspectRatio: false, //allow the graph to resize to its container
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true //make sure zero line exists on the graph
        }
      }]
    }
  }, //<-make sure plugins is outside of the options object
  plugins: [{
    beforeRender: function(graph) {
      let gradient = graph.ctx.createLinearGradient(0, 0, 0, graph.height),         //create a gradient for the background
          zero_line = graph.scales[`y-axis-0`].getPixelForValue(0) / graph.height;  //calculate where the zero line is plotted on the graph

      gradient.addColorStop(0, `rgba(0,200,0,.2)`);         //good color faded out
      gradient.addColorStop(zero_line, `rgba(0,200,0,.8)`); //good color at zero line
      gradient.addColorStop(zero_line, `rgba(200,0,0,.8)`); //bad color at zero line
      gradient.addColorStop(1, `rgba(200,0,0,.2)`);         //bad color faded out

      graph.data.datasets[0]._meta[0].$filler.el._model.backgroundColor = gradient; //set the graphs background to the gradient we just made
    }
  }]
});