Question

我正在尝试构建一个简单的图表。 X轴是月，Y轴是值。这是我的图表的演示

var chart = AmCharts.makeChart("chartdiv", {
        "type": "xy",
        "theme": "light",
        "dataDateFormat": "DD-MM-YYYY",
        "graphs": [
            {
                "id":"g8",
                "balloon":{
                    "drop":true,
                    "adjustBorderColor":false,
                    "color":"#ffffff"
                },
                "bullet":"round",
                "bulletBorderAlpha":1,
                "bulletColor":"#FFFFFF",
                "bulletSize":5,
                "dashLength":0,
                "hideBulletsCount":50,
                "lineThickness":2,
                "lineColor":"#67b7dc",
                "title":"Store 8",
                "useLineColorForBulletBorder":true,
                "xField":"d1",
                "yField":"p1",
                "xAxis":"g8",
                "balloonText":"<span style='font-size:18px;'>$[[d2]]</span><br>07/1/2017-12/31/2017"
            }
        ],
        "valueAxes": [
            {
                "id": "g8",
                "axisAlpha": 1,
                "gridAlpha": 1,
                "axisColor": "#b0de09",
                "color": "#b0de09",
                "dashLength": 5,
                "centerLabelOnFullp": true,
                "position": "bottom",
                "type": "date",
                "minp": "DD-MM-YYYY",
                "markPeriodChange": false,
            }
        ],
        "dataProvider": [
            {
                "d1":"01/01/2017",
                "p1":"5353.9000"
            },{
                "d1":"02/01/2017",
                "p1":"5353.9000"
            },{
                "d1":"01/02/2017",
                "p1":"5288.9500"
            },{
                "d1":"01/03/2017",
                "p1":"6850.9900"
            },{
                "d1":"01/04/2017",
                "p1":"5543.1900"
            },{
                "d1":"01/05/2017",
                "p1":"5519.0100"
            },{
                "d1":"01/06/2017",
                "p1":"6191.7500"
            }
        ]
    });

https://jsfiddle.net/noroots/xru967ha/

我不知道为什么，但是X轴标签缺少6月，所有标签看起来都像是偏移了。如何将其移到左侧并显示缺少的月份？

Answer 1

您可以在没有绘制点的前后添加数据项：

"dataProvider": [{
    "d1":"01/12/2016"
}, {
    "d1":"01/01/2017",
    "p1":"5353.9000"
}, ...

请查看此处的示例：https://jsfiddle.net/xru967ha/5/

旧答案

请查看以下示例。它使用AmSerialChart，然后使用datePadding插件在数据的开头和结尾设置15天。

"categoryAxis": {
    "parseDates": true,
    "minPeriod": "MM",
    "prependPeriods": 0.5, // add 15 days start
    "appendPeriods": 0.5   // add 15 days to end
}

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "marginRight": 40,
    "marginLeft": 60,
    "dataDateFormat": "DD-MM-YYYY",
    "valueAxes": [{
        "id": "v1",
        "axisAlpha": 0,
        "position": "left",
        "ignoreAxisWidth": true,
        "dashLength": 5
    }],
    "graphs": [{
        "id": "g1",
        "balloon":{
          "drop":true,
          "adjustBorderColor":false,
          "color":"#ffffff"
        },
        "bullet": "round",
        "bulletBorderAlpha": 1,
        "bulletColor": "#FFFFFF",
        "bulletSize": 5,
        "hideBulletsCount": 50,
        "lineThickness": 2,
        "lineColor":"#67b7dc",
        "title": "red line",
        "useLineColorForBulletBorder": true,
        "valueField": "p1",
        "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
    }],
    "chartCursor": {
        "pan": true,
        "valueLineEnabled": true,
        "valueLineBalloonEnabled": true,
        "cursorAlpha":1,
        "cursorColor":"#258cbb",
        "limitToGraph":"g1",
        "valueLineAlpha":0.2,
        "valueZoomable":true
    },
    "categoryField": "d1",
    "categoryAxis": {
        "parseDates": true,
        "minorGridEnabled": true,
        "axisColor": "#b0de09",
        "color": "#b0de09",
        "dashLength": 5,
        "boldPeriodBeginning": false,
        "markPeriodChange": false,
        "minPeriod": "MM",
        "prependPeriods": 0.5,
        "appendPeriods": 0.5
    },
    "export": {
        "enabled": true
    },
    "dataProvider": [
		{
			"d1":"01/01/2017",
			"p1":"5353.9000"
		},{
			"d1":"02/01/2017",
			"p1":"5353.9000"
		},{
			"d1":"01/02/2017",
			"p1":"5288.9500"
		},{
			"d1":"01/03/2017",
			"p1":"6850.9900"
		},{
			"d1":"01/04/2017",
			"p1":"5543.1900"
		},{
			"d1":"01/05/2017",
			"p1":"5519.0100"
		},{
			"d1":"01/06/2017",
			"p1":"6191.7500"
		}
	]
});

#chartdiv {
	width	: 800px;
	height	: 500px;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/plugins/tools/datePadding/datePadding.min.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

在Amcharts x轴上缺少日期

1 个答案: