无法在ChartJS中获取区域和范围

Unable to get Area and Range in ChartJS

本文关键字：区域 范围 获取 ChartJS      更新时间：2023-09-26

我是HTML5和ChartJS新手。我似乎在附加JS图表版本1.0.1和2.1.1中找到了两种不同类型的声明。你能简单解释一下吗?

另外，我无法在我的本地副本中得到这个图表后面的条纹，但出现在JSfiddle中。链接:http://jsfiddle.net/u20cfpcd/为什么呢?

我代码:

<!DOCTYPE HTML>
<html>
<head></head>
<body>
  <canvas id="myChart" width="250" height="250"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
    <!-- <script src="Chart_v2.min.js"></script> -->
  <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;
  }
});
var config = {
  type: 'stripe',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "My First dataset",
      fill: false,
      data: [65, 20, 80, 81, 56, 85, 40],
      width: [12, 4, 5, 13, 12, 2, 19],
      borderColor: "rgba(75,192,192,1)",
      backgroundColor: "rgba(75,192,192,0.4)",
      pointRadius: 0
    }, {
      label: "My Second dataset",
      fill: false,
      data: [80, 81, 56, 85, 40, 65, 20],
      width: [4, 5, 13, 12, 2, 19, 12],
      borderColor: "rgba(192,75,192,1)",
      backgroundColor: "rgba(192,75,192,0.4)",
      pointRadius: 0
    }, {
      label: "My Third dataset",
      fill: false,
      data: [81, 56, 85, 40, 65, 20, 80],
      width: [5, 13, 12, 2, 19, 12, 4],
      borderColor: "rgba(192,102,75,1)",
      backgroundColor: "rgba(192,192,75,0.4)",
      pointRadius: 0
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 120
        }
      }]
    }
  }
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
</script>
</body>
</html>

我已经改变了

 if (!(ease == 1 || ease == undefined))

请检查此代码:http://jsfiddle.net/u20cfpcd/2/

如果没有动画发生，我认为，这就是问题所在

相关文章：