Amcharts不显示2d Y轴(Json数据)

时间:2018-05-27 07:39:40

标签: json amcharts

我有以下Json数据(摘录),用于绘制带有amchart的双Y轴图表:

[{"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

美元系列的蓝线显然无法正常显示。 我已经能够得到一个双Y轴图正确显示(http://jsfiddle.net/spjem6b8/)随机生成的数据,所以我想这是产生这个问题的json部分。

我在这里做错了什么? 感谢

1 个答案:

答案 0 :(得分:0)

您的output "server_id1" { value = "${element(aws_instance.prod_server.*.id, 0)}" } 不够高,无法使第二个Y轴足够大,以便在您的数据集中封装您的USD值。在当前设置中,您的第二个Y轴值范围为0-6,但您的USD值范围为4-600。在这种情况下,将synchronizationMultiplier增加到600即可。

syncrhonizationMultiplier

还有一个名为 "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

以下是更新后的倍数:http://jsfiddle.net/spjem6b8/1/