我有以下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>
这是我得到的图表的屏幕截图:
美元系列的蓝线显然无法正常显示。 我已经能够得到一个双Y轴图正确显示(http://jsfiddle.net/spjem6b8/)随机生成的数据,所以我想这是产生这个问题的json部分。
我在这里做错了什么? 感谢
答案 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/