javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

-

i try , create radar chart using chart.js has various colours each scaleline, or coloured between scalelines. wondering if possible?

from:

enter image description here

to:

enter image description here

i have working graph, though there doesn't seem method change individual scale lines.

kind regards leigh

you can extend radar chart type this, so

chart.types.radar.extend({     name: "radaralt",     initialize: function (data) {         chart.types.radar.prototype.initialize.apply(this, arguments);          var originalscaledraw = this.scale.draw;         var ctx = this.chart.ctx;         this.scale.draw = function () {             var linewidth = this.linewidth;             // bypasses line drawing in originalscaledraw             this.linewidth = linewidth;              originalscaledraw.apply(this, arguments);              ctx.linewidth = this.linewidth;             var scale = this;             // draw             chart.helpers.each(scale.ylabels, function (label, index) {                 // color of each radial line - replace array lookup (if limit scalesteps)                 ctx.strokestyle = "hsl(" + index / scale.ylabels.length * 360 + ", 80%, 70%)";                  // copy of chart.js code                 ctx.beginpath();                 (var = 0; < scale.valuescount; i++) {                     pointposition = scale.getpointposition(i, scale.calculatecenteroffset(scale.min + (index * scale.stepvalue)));                     if (i === 0) {                         ctx.moveto(pointposition.x, pointposition.y);                     } else {                         ctx.lineto(pointposition.x, pointposition.y);                     }                 }                 ctx.closepath();                 ctx.stroke();             });         }     } });

and call so

var ctx = document.getelementbyid("mychart").getcontext("2d"); var myradarchart = new chart(ctx).radaralt(data, {     scalelinewidth: 10 });  // requried if have animation: false // myradarchart.update();

fiddle - http://jsfiddle.net/x3ftqx5r/

of course, sane thing change lightness value instead of hue value :-)

enter image description here


Comments

Post a Comment

Popular posts from this blog

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

-
suddenly have started receiving above error without changes having been made script. host 1and1 (i know...) the script still works fine on different server, , suspicion there must have been server config change has lead this, although hosts plead ignorance. there's no information on above error @ in google can find - have ideas? server running apache if helps. had similar problem. came out of blue. no php code changed. what changed: php upgraded 5.5.25-1 5.5.26. a security risk in php mail() function has been fixed , newlines in additional_headers allowed no more. because newlines mean: starts email message (and surely don't want inject newlines through headers followed evil message). what have worked fine, e.g. having newlines after headers or passing whole message additional_headers , function no more. solution : sanitize headers. no multiple newlines in additional_headers argument. these count "multiple or malformed newlines":...
Read more

android - Go back to previous fragment -

-
btw second fragment. appear once press button in first fragment. in fragment, if press button on phone, go previous fragment. need guys. in advance. public class listalldoctorfragment extends fragment { button close; @nullable @override public view oncreateview(layoutinflater inflater, viewgroup container, bundle savedinstancestate) { view view = inflater.inflate(r.layout.listalldoctor, container,false); close = (button) view.findviewbyid(r.id.button); close.setonclicklistener(new view.onclicklistener() { @override public void onclick(view view) { android.app.fragmentmanager fm = getfragmentmanager(); fragmenttransaction ft = fm.begintransaction(); shit f2 = new shit(); ft.add(r.id.content_frame, f2); ft.addtobackstack(null); ft.commit(); } }); return view; } } assuming want g...
Read more