Anychart散点气泡图放大

Question

I am using the Scatter Plot with bubble() mode. I have a lot of points to display and a lot of them are on top of each other or really close and it is difficult to differentiate. So I have tried to use anychart.ui.zoom().render(scatterChart) but it throws the error Uncaught TypeError: a.insertBefore is not a function . Is there an alternative solution?

Answer 1

The anychart.ui.zoom().render(scatterChart) is acceptable only for Maps. For Scatter chart you can use other approaches. You can add x- and y-scrollers, check the sample below

 anychart.onDocumentReady(function () { var stage = anychart.graphics.create('container'); // create data var data = [ {x: 0.6, value: 22}, {x: 1.7, value: 55}, {x: 2.3, value: 50}, {x: 3.5, value: 80}, {x: 3.9, value: 74}, {x: 4, value: 68}, {x: 4, value: 76}, {x: 4.1, value: 84}, {x: 4.7, value: 93} ]; // create a chart var chart = anychart.scatter(); // create a marker series and set the data var series = chart.marker(data); // enable major grids chart.xGrid(true); chart.yGrid(true); // enable minor grids chart.xMinorGrid(true); chart.yMinorGrid(true); chart.margin({left: 10, bottom: 10}); chart.xAxis().labels().format('{%value}{decimalsCount:2}'); chart.yAxis().labels().format('{%value}{decimalsCount:1}'); // set the container id chart.container(stage).draw(); var bounds = chart.getPixelBounds(); //create x-scroller var xScroller = anychart.standalones.scroller(); xScroller.parentBounds(60, bounds.height-60, bounds.width-80, 50); xScroller.container(stage).draw(); //create y-scroller var yScroller = anychart.standalones.scroller(); yScroller.orientation('left'); yScroller.parentBounds(5, 10, 0, bounds.height-60); yScroller.container(stage).draw(); //place scrollers on window resize window.onresize = function(event) { var bounds = chart.getPixelBounds(); xScroller.parentBounds(60, bounds.height-60, bounds.width-80, 50); yScroller.parentBounds(5, 10, 0, bounds.height-60); }; //get info about scales var xScale = chart.xScale(); var yScale = chart.yScale(); var minX = xScale.minimum(); var maxX = xScale.maximum(); var minY = yScale.minimum(); var maxY = yScale.maximum(); //scroller listeners and handlers xScroller.listen('scrollerchange', function(e) { xScale.minimum(e.startRatio * maxX + minX); xScale.maximum(e.endRatio * maxX); }); yScroller.listen('scrollerchange', function(e) { yScale.minimum((1 - e.endRatio) * maxY + minY); yScale.maximum((1 - e.startRatio) * maxY); }); }); 

 html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; } 

 <script src="https://cdn.anychart.com/releases/8.3.0/js/anychart-base.min.js"></script> <script src="https://cdn.anychart.com/releases/8.3.0/js/anychart-ui.min.js"></script> <script src="https://cdn.anychart.com/releases/8.3.0/js/anychart-exports.min.js"></script> <link href="https://cdn.anychart.com/releases/8.3.0/css/anychart-ui.min.css" rel="stylesheet"/> <div id="container"></div> 

Or you can zoom to the required range using 'Start selection marquee' from the context menu (right-click)

 anychart.onDocumentReady(function () { var button = document.getElementById('button'); var stage = anychart.graphics.create('container'); // create data var data = [ {x: 0.6, value: 22}, {x: 1.7, value: 55}, {x: 2.3, value: 50}, {x: 3.5, value: 80}, {x: 3.9, value: 74}, {x: 4, value: 68}, {x: 4, value: 76}, {x: 4.1, value: 84}, {x: 4.7, value: 93} ]; // create a chart var chart = anychart.scatter(); // create a marker series and set the data var series = chart.marker(data); // enable major grids chart.xGrid(true); chart.yGrid(true); // enable minor grids chart.xMinorGrid(true); chart.yMinorGrid(true); chart.margin({left: 10, bottom: 10}); chart.xAxis().labels().format('{%value}{decimalsCount:2}'); chart.yAxis().labels().format('{%value}{decimalsCount:1}'); // set the container id chart.container(stage).draw(); //get info about scales var xScale = chart.xScale(); var yScale = chart.yScale(); var minX = xScale.minimum(); var maxX = xScale.maximum(); var minY = yScale.minimum(); var maxY = yScale.maximum(); //button listener button.addEventListener('click', function() { xScale.minimum(minX); xScale.maximum(maxX); yScale.minimum(minY); yScale.maximum(maxY); }); //chart listeners and handlers var xAxisBounds = chart.xAxis().getPixelBounds(); var yAxisBounds = chart.yAxis().getPixelBounds(); chart.listen('selectMarqueeFinish', function(e) { var normalizedX = (e.clientX >= e.startX) ? e.startX : e.clientX; var normalizedY = (e.clientY >= e.startY) ? e.startY : e.clientY; var startXRatio = (normalizedX - xAxisBounds.left) / xAxisBounds.width; var endXRatio = (normalizedX - xAxisBounds.left + e.width) / xAxisBounds.width; var startYRatio = (normalizedY - yAxisBounds.top) / yAxisBounds.height; var endYRatio = (normalizedY - yAxisBounds.top + e.height) / yAxisBounds.height; xScale.minimum(xScale.inverseTransform(startXRatio)); xScale.maximum(xScale.inverseTransform(endXRatio)); yScale.minimum(yScale.inverseTransform(1 - endYRatio)); yScale.maximum(yScale.inverseTransform(1 - startYRatio)); }); }); 

 html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; } 

 <script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-base.min.js"></script> <script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-exports.min.js"></script> <script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-ui.min.js"></script> <link href="https://cdn.anychart.com/releases/8.2.1/css/anychart-ui.min.css" rel="stylesheet"/> <button id="button">Zoom out</button> <div id="container"></div>