ChartJS中线段的颜色不同 [英] Different color for line segments in ChartJS

问题描述

我有一个时间表图表类型.我想根据数据集对象的值在两个点之间的每个步骤上定义颜色.

I have a time line chart type. I would like to define color on every step between two dots depending on dataset object values.

在我的数据集数据数组中，我添加了第三项来定义颜色(如果< 30 ==>绿色/> 30 ==>红色)

In my dataset data array I have added a third item which will define the color ( if < 30 ==> green / >30 ==> red )

实际上我只是在尝试使用红色.

Actually I'm trying to only use red color.

我找到了有效的示例，该怎么做.但这是基于非时间图表类型的.

I have found a working example ,on how do do that. but it's based on non-time chart type.

我已尝试将其调整为适合我的示例，但最后一步却出现错误

I have tried to adapt it to my example but I get error in last step

ctx.bezierCurveTo(
  previous.controlPoints.outer.x,
  previous.controlPoints.outer.y,
  point.controlPoints.inner.x,
  point.controlPoints.inner.y,
  point.x,
  point.y
);

"Uncaught TypeError: Cannot read property 'outer' of undefined",

这是复制品

var canvas = document.getElementById('myChart');
let customLine = Chart.controllers.line.extend({
      name: 'line',
      draw: function() {
        Chart.controllers.line.prototype.draw.apply(this, arguments);
        let datasetLength = this.chart.config.data.datasets.length;
        for (let i = 0; i < datasetLength; i++) {
          for (let j = 0; j < this.chart.config.data.datasets[i].data.length; j++) {
            var index = j;
            var datasetIndex = i;

            var hasValue = function(item) {
                return item.y !== null;
              },
              previousPoint = function(point, collection, index) {
                return Chart.helpers.findPreviousWhere(collection, hasValue, index) || point;
              };

            var ctx = this.chart.ctx;
            var dataset = this.chart.config.data.datasets[datasetIndex];
            var pointsWithValues = Chart.helpers.where(dataset.data, hasValue);
            ctx.strokeStyle = 'red';
            ctx.lineWidth = 3;
            ctx.beginPath();
            var point = dataset.data[index];
            ctx.moveTo(point.x, point.y);
            point = dataset.data[index + 1];
            console.log(point)
            var previous = previousPoint(point, pointsWithValues, index + 1);
            ctx.bezierCurveTo(
              previous.controlPoints.outer.x,
              previous.controlPoints.outer.y,
              point.controlPoints.inner.x,
              point.controlPoints.inner.y,
              point.x,
              point.y
            );
            ctx.stroke();
          }
        }
      }
    });
    Chart.controllers.customLine = customLine;

var config = {
  "options": {
    "scales": {
      "xAxes": [
            {
              "type": 'time',
              "time": {
                "unit": 'minute',
                "unitStepSize": 60,

              },
              "distribution": 'linear',
              "bounds": 'ticks',
              "ticks": {
                "source": 'auto',
                "autoSkip": true,
                "stepSize": 10
              }
            }
          ],
    },
  },
  "data": {
  	"labels": ['2016-04-18T00:00:00Z', '2016-04-18T23:59:00Z'],
    "datasets": [
    {
      "label": "line",
      "type": "customLine",
      "backgroundColor": "#00b",
      "borderColor": "#00b",
      //"yAxisID": "axis4",
      "borderWidth": 1,
      "fill": false,
      "data": [
{x:"2016-04-18T01:00:00Z", y:1,z:10},
{x:"2016-04-18T04:00:00Z", y:2,z:20},
{x:"2016-04-18T06:00:00Z", y:3,z:60},
{x:"2016-04-18T08:00:00Z", y:7,z:70},
{x:"2016-04-18T10:00:00Z", y:1,z:30},
{x:"2016-04-18T14:00:00Z", y:3,z:100}
]
    },
    ]
  },

};
var myBarChart = Chart.Line(canvas, config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.0/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

推荐答案

在另一个问题中已经有答案 GitHub帖子，其中提到了

There's already an answer at another question which references a GitHub post which mentions a JSFiddle written in Chart.js 2.7.1 which can be updated to the latest 2.9.3 version without problems.

EgorOvechkin的信用额

Credit to EgorOvechkin

代码:

var ctx = document.getElementById('myChart').getContext('2d');
//adding custom chart type
Chart.defaults.multicolorLine = Chart.defaults.line;
Chart.controllers.multicolorLine = Chart.controllers.line.extend({
  draw: function(ease) {
    var
      startIndex = 0,
      meta = this.getMeta(),
      points = meta.data || [],
      colors = this.getDataset().colors,
      area = this.chart.chartArea,
      originalDatasets = meta.dataset._children
        .filter(function(data) {
          return !isNaN(data._view.y);
        });

    function _setColor(newColor, meta) {
      meta.dataset._view.borderColor = newColor;
    }

    if (!colors) {
      Chart.controllers.line.prototype.draw.call(this, ease);
      return;
    }

    for (var i = 2; i <= colors.length; i++) {
      if (colors[i-1] !== colors[i]) {
        _setColor(colors[i-1], meta);
        meta.dataset._children = originalDatasets.slice(startIndex, i);
        meta.dataset.draw();
        startIndex = i - 1;
      }
    }

    meta.dataset._children = originalDatasets.slice(startIndex);
    meta.dataset.draw();
    meta.dataset._children = originalDatasets;

    points.forEach(function(point) {
      point.draw(area);
    });
  }
});

var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'multicolorLine',

    // The data for our dataset
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
            //first color is not important
            colors: ['', 'red', 'green', 'blue']
        }]
    },

    // Configuration options go here
    options: {}
});

这篇关于ChartJS中线段的颜色不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！