amchart xy-chart - проблема с радиусом круга вокруг нулевой точки / и масштабированием по оси - PullRequest
Новая
       91

amchart xy-chart - проблема с радиусом круга вокруг нулевой точки / и масштабированием по оси

0 голосов
/ 27 мая 2020

Я пытаюсь найти решение для создания простой xy-диаграммы amchart, которая показывает точки данных на xy. В зависимости от xy-позиции пузыри данных должны иметь разный цвет. Например: x или y больше 10 (пузырь отображается красным), x или y больше 5 (желтый) и т. Д. Чтобы подчеркнуть это, я не хочу создавать несколько зон около нуля.
Это вот как это должно выглядеть:

https://i.stack.imgur.com/uCzjJ.png

У меня две проблемы:

Прежде всего, я не могу получить одинаковый масштаб для x и y. Я уже пробовал несколько вариантов, таких как установка минимума и максимума для обеих осей, но всегда был другой масштаб.

Вторая проблема - это радиус вокруг нулевой точки. Я попытался добавить простой круг и немного поигрался с атрибутом радиуса, но и не получил удовлетворительного решения.

Вот что у меня получилось: 

AmCharts.addInitHandler(function(chart) {
  // cycle through all data points and assign color depending on x/y
  for (var x in chart.dataProvider) {
    var dp = chart.dataProvider[x];
    if (dp.y > 10 || dp.x > 10 || dp.y < -10 || dp.x < -10)
      dp.color = "#ff0000";
    else if (dp.y > 5 || dp.x > 5 || dp.y < -5 || dp.x < -5)
      dp.color = "#FFFF33";
    else
      dp.color = "#7CFC00";
  }
}, ['xy']);

var chart = AmCharts.makeChart("chartdiv", {
  "type": "xy",
  "dataProvider": [{
    "y": 0,
    "x": 0,
    "value": 0
  },{
    "y": -10,
    "x": -10,
    "value": 10
  },{
    "y": 15,
    "x": 15,
    "value": 10
  }],
  "valueAxes": [{
    "position": "bottom",
    "axisAlpha": 0
  }, {
    "minMaxMultiplier": 1.2,
    "axisAlpha": 0,
    "position": "left"
  }],
  "startDuration": 1.5,
  "graphs": [{
    "balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
    "bullet": "circle",
    "bulletBorderAlpha": 0.2,
    "bulletAlpha": 0.8,
    "colorField": "color",
    "lineAlpha": 0,
    "fillAlphas": 0,
    "valueField": "value",
    "xField": "x",
    "yField": "y",
    "maxBulletSize": 10
  }],
  "marginLeft": 46,
  "marginBottom": 35
});

Спасибо за вашу помощь ..

...