Anychart Scatter Bubble Chart увеличить изображение

Question

Я использую Scatter Plot в режиме bubble().У меня есть много точек для отображения, и многие из них находятся друг над другом или очень близко друг к другу, и их трудно различить.Поэтому я попытался использовать anychart.ui.zoom().render(scatterChart), но выдает ошибку Uncaught TypeError: a.insertBefore is not a function.Есть ли альтернативное решение?

Answer 1

anychart.ui.zoom().render(scatterChart) допустимо только для Карт.Для точечной диаграммы вы можете использовать другие подходы.Вы можете добавить x- и y-скроллеры, посмотрите пример ниже

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>

Или вы можете увеличить нужный диапазон, используя «Начать выделение» из контекстного меню (щелчок правой кнопкой мыши)

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>