javascript - color sides of 3d pie chart in highcharts -
i want make pie chart can give color side of 3d pie chart, darker blue color.
i can configure lighter blue color, side color taken based on main color of pie.
i want individually color both main surface , sides.
var chart = new highcharts.chart({ chart: { renderto: 'container', type: 'pie', options3d: { enabled: true, alpha: 60 } }, plotoptions: { pie: { depth: 150, animation: false, states: { hover: false } } }, series: [{ data: [ ['apple', 8] ] }], tooltip: { enabled: false } });<!doctype html> <html> <head> <title>tyre</title> </head> <body> <div id="container" style="height: 400px"></div> <script src="http://code.highcharts.com/adapters/standalone-framework.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/highcharts-3d.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <script type="text/javascript" src="script.js"></script> </body> </html>
you can still udpate colors using element.attr() option. there point.graphic contains shapes slice.
example below updates color on load , redraw event. may want use point.events.mouseover/mouseout apply different color when hovering slice , restore color.
function updatecolors() { var chart = this, graphic = chart.series[0].points[0].graphic; //get first slice graphic.side1.attr({ fill: "red" }); graphic.side2.attr({ fill: "orange" }); graphic.inn.attr({ fill: "black" }); graphic.out.attr({ fill: "yellow" }); graphic.top.attr({ fill: "grey" }); } var chart = new highcharts.chart({ chart: { renderto: 'container', type: 'pie', events: { redraw: updatecolors, load: updatecolors }, options3d: { enabled: true, alpha: 60 } }, plotoptions: { pie: { depth: 150, animation: false, states: { hover: false } } }, series: [{ data: [ ['apple', 8] ] }], tooltip: { enabled: false } });<!doctype html> <html> <head> <title>tyre</title> </head> <body> <div id="container" style="height: 400px"></div> <script src="http://code.highcharts.com/adapters/standalone-framework.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/highcharts-3d.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <script type="text/javascript" src="script.js"></script> </body> </html>
Comments
Post a Comment