Amcharts не показывает ось 2d Y (данные Json) - PullRequest
Новая
       15

Amcharts не показывает ось 2d Y (данные Json)

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

У меня есть следующие данные Json (извлечение), которые я использую для построения диаграммы двойной оси Y с диаграммой amchart: 

[{"Day":"24-05 10H","Production":"0.82431267","USD":"482.02837415988"},{"Day":"24-05 11H","Production":"0.83045272","USD":"485.61885435808"},{"Day":"24-05 12H","Production":"0.83441691","USD":"487.93696995924"},{"Day":"24-05 01H","Production":"0.84323421","USD":"493.09300957644"},{"Day":"24-05 02H","Production":"0.85096095","USD":"497.61132896580006"},{"Day":"24-05 03H","Production":"0.85694953","USD":"501.11323496092"},{"Day":"24-05 04H","Production":"0.868104","USD":"507.635967456"},{"Day":"24-05 06H","Production":"0.8802085","USD":"519.796567173"},{"Day":"24-05 07H","Production":"0.8913847","USD":"532.3438566870001"},{"Day":"24-05 08H","Production":"0.89426695","USD":"530.7322322868499"},{"Day":"24-05 09H","Production":"0.89904346","USD":"531.08385173466"},{"Day":"24-05 10H","Production":"0.90740126","USD":"535.88759172324"},{"Day":"24-05 11H","Production":"0.91944257","USD":"554.8872687652799"},{"Day":"25-05 12H","Production":"0.92783829","USD":"554.54203862259"},{"Day":"25-05 02H","Production":"0.94182047","USD":"565.81654194143"},{"Day":"25-05 03H","Production":"0.94743531","USD":"574.52571941931"},{"Day":"25-05 04H","Production":"0.95331299","USD":"579.83927978564"},{"Day":"25-05 05H","Production":"0.9563386","USD":"580.4497132700001"},{"Day":"25-05 06H","Production":"0.96906754","USD":"594.5520078162"},{"Day":"25-05 07H","Production":"0.97823946","USD":"580.6878346533"},{"Day":"25-05 08H","Production":"0.97823946","USD":"580.6878346533"},{"Day":"25-05 09H","Production":"0.99806768","USD":"595.88932187024"},{"Day":"25-05 10H","Production":"0.00706363","USD":"4.21520001161"},{"Day":"25-05 11H","Production":"0.01715723","USD":"10.19647316008"},{"Day":"25-05 12H","Production":"0.02629501","USD":"15.77321951856"},{"Day":"25-05 01H","Production":"0.04011605","USD":"24.3299831645"}

И следующий код, используемый для построения диаграммы: 

<script>
var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "dataLoader": {
    "url": "http://x.x.x.x/json.php",  "format": "json"
  },
    "valueAxes": [{
    "id": "v1",
    "startDuration": 1,
    "axisColor": "#FF6600",
    "axisThickness": 5,
    "gridAlpha": 0.1,
    "axisAlpha": 1
  }, {
    "id": "v2",
    "axisColor": "#FCD202",
    "axisThickness": 5,
    "gridAlpha": 0,
    "axisAlpha": 1,
    "position": "right",
    "synchronizeWith": "v1",
    "synchronizationMultiplier": 5
  }],
 "graphs": [{
    "valueAxis": "v1",
    "type": "column",
     "fillColorsField": "#B0DE09",
 "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "title": "Production Crypto",
    "valueField": "Production"
  }, {
    "valueAxis": "v2",
    "type": "smoothedLine",
    "lineColor": "#364cf2",
    "lineThickness": 3,
    "bulletBorderThickness": 1,
    "hideBulletsCount": 30,
    "title": "Production USD",
    "valueField": "USD",
    "fillAlphas": 0
  }],
    "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "Day",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0,
    "tickPosition": "start",
    "tickLength": 20
  }
});
</script>

Это скриншот графика, который я получаю:

screenshot

Где синяя линия для серии USD явно не отображается должным образом.Мне удалось получить график с двойной осью Y, отображающий правильно (http://jsfiddle.net/spjem6b8/) со случайно сгенерированными данными, поэтому я предполагаю, что это часть json, которая создает эту проблему.

Что я делаю здесь неправильно? Спасибо

1 Ответ

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

Ваш synchronizationMultiplier недостаточно высок, чтобы вторая ось Y была достаточно большой, чтобы инкапсулировать ваши значения в долларах США в вашем наборе данных.В текущей настройке значения вашей второй оси Y находятся в диапазоне 0-6, а значения в долларах США - 4-600.Увеличьте ваш syncrhonizationMultiplier до 600 в этом случае, и он будет работать.

    "valueAxes": [{
    "id": "v1",
    "startDuration": 1,
    "axisColor": "#FF6600",
    "axisThickness": 5,
    "gridAlpha": 0.1,
    "axisAlpha": 1
  }, {
    "id": "v2",
    "axisColor": "#FCD202",
    "axisThickness": 5,
    "gridAlpha": 0,
    "axisAlpha": 1,
    "position": "right",
    "synchronizeWith": "v1",
    "synchronizationMultiplier": 600
  }],

Существует также неподдерживаемое бета-свойство, называемое synchronizeGrid, которое иногда может делать это автоматически, но не гарантируется работа со всеми комбинациями установки осей значений, поэтому пробег может изменяться.Это установлено в верхней части конфигурации диаграммы: 

AmCharts.makeChart("chartdiv", {
  // ...
  synchronizeGrid: true, //no need for synchronizeWith/Multiplier in the value axis
  // ...
});

Вот обновленная скрипка с обновленным множителем: http://jsfiddle.net/spjem6b8/1/

...