i trying create 3d-scatter plot of data highcharts. make easier understand 3d position of data points, specially when using still picture of plot instead of interactive draggable version, create projections of data on each of plot boundary planes.
it not difficult assign corresponding position of these projections (example: http://jsfiddle.net/worg6jlz/1/), them appear real projections, not circles (or spheres) regardless of perspective.
is there way transform plot markers according corresponding plane of projection, shape consistent such projection regardless of viewpoint?
thanks.
$(function () { // give points 3d feel adding radial gradient highcharts.getoptions().colors = $.map(highcharts.getoptions().colors, function (color) { return { radialgradient: { cx: 0.4, cy: 0.3, r: 0.5 }, stops: [ [0, color], [1, highcharts.color(color).brighten(-0.2).get('rgb')] ] }; }); // set chart var chart = new highcharts.chart({ chart: { renderto: 'container', margin: 100, type: 'scatter', options3d: { enabled: true, alpha: 10, beta: 30, depth: 450, viewdistance: 5, fittoplot: false, frame: { bottom: { size: 1, color: 'rgba(0,0,0,0.02)' }, back: { size: 1, color: 'rgba(0,0,0,0.04)' }, side: { size: 1, color: 'rgba(0,0,0,0.06)' } } } }, title: { text: 'draggable box' }, subtitle: { text: 'click , drag plot area rotate in space' }, plotoptions: { scatter: { width: 10, height: 10, depth: 10 } }, yaxis: { min: 0, max: 10, title: null }, xaxis: { min: 0, max: 10, gridlinewidth: 1 }, zaxis: { min: 0, max: 10, showfirstlabel: false }, legend: { enabled: false }, series: [{ name: 'data', marker: {radius: 7, symbol: 'circle', fillcolor: { radialgradient: { cx: 0.4, cy: 0.3, r: 0.5 }, stops: [[0, 'rgba(195,195,255,1)'], [1, 'rgba(0,0,255,1)']]} }, colorbypoint: false, color: 'blue', data: [[9,9,1],[8,8,2],[7,7,3],[6,6,4],[5,5,5],[4,4,6],[3,3,7],[2,2,8],[1,1,9]] }, { name: 'proj.a', marker: {radius: 7, symbol: 'circle'}, colorbypoint: false, color: 'rgba(155,155,155,1)', data: [[0,9,1],[0,8,2],[0,7,3],[0,6,4],[0,5,5],[0,4,6],[0,3,7],[0,2,8],[0,1,9]] }, { name: 'proj.b', marker: {radius: 7, symbol: 'circle'}, colorbypoint: false, color: 'rgba(155,155,155,1)', data: [[9,0,1],[8,0,2],[7,0,3],[6,0,4],[5,0,5],[4,0,6],[3,0,7],[2,0,8],[1,0,9]] }, { name: 'proj.c', marker: {radius: 7, symbol: 'circle'}, colorbypoint: false, color: 'rgba(155,155,155,1)', data: [[9,9,10],[8,8,10],[7,7,10],[6,6,10],[5,5,10],[4,4,10],[3,3,10],[2,2,10],[1,1,10]] }] }); // add mouse events rotation $(chart.container).bind('mousedown.hc touchstart.hc', function (estart) { estart = chart.pointer.normalize(estart); var posx = estart.pagex, posy = estart.pagey, alpha = chart.options.chart.options3d.alpha, beta = chart.options.chart.options3d.beta, newalpha, newbeta, sensitivity = 5; // lower more sensitive $(document).bind({ 'mousemove.hc touchdrag.hc': function (e) { // run beta newbeta = beta + (posx - e.pagex) / sensitivity; chart.options.chart.options3d.beta = newbeta; // run alpha newalpha = alpha + (e.pagey - posy) / sensitivity; chart.options.chart.options3d.alpha = newalpha; chart.redraw(false); }, 'mouseup touchend': function () { $(document).unbind('.hc'); } }); }); }); bonus: additional interesting feature, though not main purpose of post, draw lines linking data points projections when mouse pointer placed on them.
Comments
Post a Comment