javascript - Unable to get Area and Range in ChartJS -
i'm new html5 , chartjs. seem find 2 different type of declarations among attaching js chart versions 1.0.1 , 2.1.1. can briefly explain on that.?
also, i'm unable stripes behind in chart in local copy, appears in jsfiddle. link: http://jsfiddle.net/u20cfpcd/ why ?
my code:
<!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 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 data , bezier control points top of stripe helpers.each(meta.data, function(point, index) { point._view.y += (yscale.getpixelforvalue(widths[index]) - yscalezeropixel); }); chart.controllers.line.prototype.updatebeziercontrolpoints.apply(this); // draw top of 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 data top of stripe // initialize data , bezier control points bottom of stripe helpers.each(meta.data, function(point, index) { point._view.y -= 2 * (yscale.getpixelforvalue(widths[index]) - yscalezeropixel); }); // drawing points in reverse direction meta.data.reverse(); chart.controllers.line.prototype.updatebeziercontrolpoints.apply(this); // draw bottom of 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 data bottom of 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>
i have changed
if (!(ease == 1 || ease == undefined)) please check code : http://jsfiddle.net/u20cfpcd/2/
the ease getting undefined if not animation occurrs think, problem.
Comments
Post a Comment