具有区域范围的 Chart.js 折线图

我想向

理想情况下，我可以提供一个数据集，其中包含一个类似于 data 的字段，用于指定某一点的线宽.

解决方案

您可以从折线图类型创建新的图表类型来执行此操作

<小时>

预览

<小时>

脚本

Chart.defaults.stripe = Chart.helpers.clone(Chart.defaults.line);Chart.controllers.stripe = Chart.controllers.line.extend({绘制:功能(轻松){var 结果 = Chart.controllers.line.prototype.draw.apply(this, arguments);//在我们完成动画之前不要渲染条纹if (!this.rendered && ease !== 1)返回;this.rendered = true;var helpers = Chart.helpers;var meta = this.getMeta();var yScale = this.getScaleForId(meta.yAxisID);var yScaleZeroPixel = yScale.getPixelForValue(0);var 宽度 = this.getDataset().width;var ctx = this.chart.chart.ctx;ctx.save();ctx.fillStyle = this.getDataset().backgroundColor;ctx.lineWidth = 1;ctx.beginPath();//初始化条带顶部的数据和贝塞尔控制点helpers.each(meta.data, function(point, index) {point._view.y += (yScale.getPixelForValue(widths[index]) - yScaleZeroPixel);});Chart.controllers.line.prototype.updateBezierControlPoints.apply(this);//绘制条纹的顶部helpers.each(meta.data, function(point, index) {如果(索引 === 0)ctx.moveTo(point._view.x, point._view.y);别的 {var previous = helpers.previousItem(meta.data, index);var next = helpers.nextItem(meta.data, index);Chart.elements.Line.prototype.lineToNextPoint.apply({_图表: {ctx:ctx}}，[上一个，点，下一个，空，空])}});//恢复条带顶部的数据//初始化条纹底部的数据和贝塞尔控制点helpers.each(meta.data, function(point, index) {point._view.y -= 2 * (yScale.getPixelForValue(widths[index]) - yScaleZeroPixel);});//我们正在反向绘制点元数据反向()；Chart.controllers.line.prototype.updateBezierControlPoints.apply(this);//绘制条纹的底部helpers.each(meta.data, function(point, index) {如果(索引 === 0)ctx.lineTo(point._view.x, point._view.y);别的 {var previous = helpers.previousItem(meta.data, index);var next = helpers.nextItem(meta.data, index);Chart.elements.Line.prototype.lineToNextPoint.apply({_图表: {ctx:ctx}}，[上一个，点，下一个，空，空])}});//恢复条带底部的数据元数据反向()；helpers.each(meta.data, function(point, index) {point._view.y += (yScale.getPixelForValue(widths[index]) - yScaleZeroPixel);});Chart.controllers.line.prototype.updateBezierControlPoints.apply(this);ctx.stroke();ctx.closePath();ctx.fill();ctx.restore();返回结果；}});

然后

<代码>...数据: ...，宽度:[12、4、5、13、12、2、19]，...

<小时>

小提琴 - http://jsfiddle.net/u20cfpcd/

注意:乐队似乎存在间歇性问题，没有出现.注释掉 if (!this.rendered && ease !== 1) return 似乎可以解决这个问题.感谢@ClaudeBrisson 找出问题和解决方案！

I'd like to add another dimension to a Chart.js line chart, similar to the chart below, or this Highcharts example. I'm having difficulty understanding where I'd be able to implement such a feature, given Chart.js' myriad extension options.

Ideally, I'd be able to provide a dataset with a field similar to data specifying the width of the line at a certain point.

解决方案

You can create new chart type from the line chart type to do this

---

Preview

---

Script

Chart.defaults.stripe = Chart.helpers.clone(Chart.defaults.line);
Chart.controllers.stripe = Chart.controllers.line.extend({
  draw: function(ease) {
    var result = Chart.controllers.line.prototype.draw.apply(this, arguments);

    // don't render the stripes till we've finished animating
    if (!this.rendered && ease !== 1)
      return;
    this.rendered = true;


    var helpers = Chart.helpers;
    var meta = this.getMeta();
    var yScale = this.getScaleForId(meta.yAxisID);
    var yScaleZeroPixel = yScale.getPixelForValue(0);
    var widths = this.getDataset().width;
    var ctx = this.chart.chart.ctx;

    ctx.save();
    ctx.fillStyle = this.getDataset().backgroundColor;
    ctx.lineWidth = 1;
    ctx.beginPath();

    // initialize the data and bezier control points for the top of the stripe
    helpers.each(meta.data, function(point, index) {
      point._view.y += (yScale.getPixelForValue(widths[index]) - yScaleZeroPixel);
    });
    Chart.controllers.line.prototype.updateBezierControlPoints.apply(this);

    // draw the top of the stripe
    helpers.each(meta.data, function(point, index) {
      if (index === 0)
        ctx.moveTo(point._view.x, point._view.y);
      else {
        var previous = helpers.previousItem(meta.data, index);
        var next = helpers.nextItem(meta.data, index);

        Chart.elements.Line.prototype.lineToNextPoint.apply({
          _chart: {
            ctx: ctx
          }
        }, [previous, point, next, null, null])
      }
    });

    // revert the data for the top of the stripe
    // initialize the data and bezier control points for the bottom of the stripe
    helpers.each(meta.data, function(point, index) {
      point._view.y -= 2 * (yScale.getPixelForValue(widths[index]) - yScaleZeroPixel);
    });
    // we are drawing the points in the reverse direction
    meta.data.reverse();
    Chart.controllers.line.prototype.updateBezierControlPoints.apply(this);

    // draw the bottom of the stripe
    helpers.each(meta.data, function(point, index) {
      if (index === 0)
        ctx.lineTo(point._view.x, point._view.y);
      else {
        var previous = helpers.previousItem(meta.data, index);
        var next = helpers.nextItem(meta.data, index);

        Chart.elements.Line.prototype.lineToNextPoint.apply({
          _chart: {
            ctx: ctx
          }
        }, [previous, point, next, null, null])
      }

    });

    // revert the data for the bottom of the stripe
    meta.data.reverse();
    helpers.each(meta.data, function(point, index) {
      point._view.y += (yScale.getPixelForValue(widths[index]) - yScaleZeroPixel);
    });
    Chart.controllers.line.prototype.updateBezierControlPoints.apply(this);

    ctx.stroke();
    ctx.closePath();
    ctx.fill();
    ctx.restore();

    return result;
  }
});

and then

...
data: ...,
width: [12, 4, 5, 13, 12, 2, 19],
...

---

Fiddle - http://jsfiddle.net/u20cfpcd/

Note: There seems to be an intermittent problem with the bands not appearing. Commmenting out if (!this.rendered && ease !== 1) return seems to fix this. Thanks @ClaudeBrisson for identifying the problem and solution!