AmCharts：限制 Y 轴范围并消除非周期性间隙
AmCharts: Limit Y-Axs -Range and cut out non-periodical gaps
我在尝试了很多设置后遇到了 amCharts 问题。
我想将 y 轴的范围限制在 1-150 之间，并且不希望 amCharts 绘制值为 0 的数据点。x 范围内没有时间段。我创建了一个 fiddle 的实际结果：http://jsfiddle.net/zt9exqwq/5/
var chartData = [{"position":"114","datum":"20.12.2014"},{"position":"0","datum":"24.12.2014"},{"position":"127","datum":"29.12.2014"},{"position":"128","datum":"02.01.2015"},{"position":"125","datum":"05.01.2015"},{"position":"132","datum":"09.01.2015"},{"position":"0","datum":"13.01.2015"},{"position":"131","datum":"17.01.2015"},{"position":"0","datum":"20.01.2015"},{"position":"0","datum":"24.01.2015"},{"position":"88","datum":"28.01.2015"},{"position":"89","datum":"01.02.2015"},{"position":"94","datum":"04.02.2015"},{"position":"86","datum":"08.02.2015"},{"position":"80","datum":"12.02.2015"},{"position":"83","datum":"16.02.2015"},{"position":"82","datum":"19.02.2015"},{"position":"0","datum":"23.02.2015"},{"position":"109","datum":"27.02.2015"},{"position":"100","datum":"03.03.2015"},{"position":"98","datum":"06.03.2015"},{"position":"92","datum":"10.03.2015"},{"position":"99","datum":"14.03.2015"},{"position":"97","datum":"18.03.2015"},{"position":"93","datum":"21.03.2015"},{"position":"0","datum":"25.03.2015"},{"position":"0","datum":"29.03.2015"},{"position":"108","datum":"02.04.2015"},{"position":"106","datum":"06.04.2015"},{"position":"109","datum":"10.04.2015"},{"position":"0","datum":"14.04.2015"},{"position":"107","datum":"17.04.2015"},{"position":"114","datum":"21.04.2015"},{"position":"109","datum":"25.04.2015"},{"position":"0","datum":"29.04.2015"},{"position":"111","datum":"02.05.2015"},{"position":"101","datum":"06.05.2015"},{"position":"84","datum":"10.05.2015"},{"position":"0","datum":"14.05.2015"},{"position":"74","datum":"17.05.2015"},{"position":"71","datum":"21.05.2015"},{"position":"72","datum":"25.05.2015"},{"position":"72","datum":"29.05.2015"},{"position":"0","datum":"01.06.2015"},{"position":"66","datum":"05.06.2015"},{"position":"73","datum":"09.06.2015"},{"position":"78","datum":"13.06.2015"},{"position":"72","datum":"16.06.2015"},{"position":"65","datum":"20.06.2015"},{"position":"67","datum":"24.06.2015"},{"position":"72","datum":"28.06.2015"},{"position":"74","datum":"02.07.2015"},{"position":"68","datum":"05.07.2015"},{"position":"67","datum":"09.07.2015"},{"position":"72","datum":"13.07.2015"},{"position":"74","datum":"17.07.2015"},{"position":"73","datum":"21.07.2015"}];
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataDateFormat": "DD.MM.YYYY",
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"bullet": "round",
"bulletBorderAlpha": 0.5,
"bulletColor": "#FFFFFF",
"bulletSize": 8,
"hideBulletsCount": 50,
"lineThickness": 2,
"useLineColorForBulletBorder": true,
"valueField": "position",
"balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[value]]</div>"
}],
"valueAxes": [{
"integersOnly": true,
"maximum": 150,
"minimum": 1,
"reversed": true,
"axisAlpha": 1,
"dashLength": 2,
"position": "left",
"title": "Position"
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":0.2,
"valueLineAlpha":0.2
},
"categoryField": "datum",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
},
"dataProvider": chartData
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
#chartdiv {
width : 100%;
height : 500px;
}
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>
实际情况如下：
这就是我想要的：
有人有想法吗？非常感谢。
数值轴
要设置值轴的比例，我们可以使用其 minimum and maximum 属性。然而，即使我们设置了这两个，图表也会尝试将值轴增量四舍五入到 "pretty" 数字，因此它仍然会显示 0.
为了解决这个问题，我们将使用另一个值轴 属性 strictMinMax。它将确保我们的值轴刻度在 0 和 15 值处被清晰地切割。
但是我们现在丢失了第一个和最后一个标签。我们将使用 guides 为 1 和 150 个值添加标签。
上面的组合代码是这样的：
"valueAxes": [{
"integersOnly": true,
"maximum": 150,
"minimum": 1,
"strictMinMax": true,
"reversed": true,
"axisAlpha": 1,
"dashLength": 2,
"position": "left",
"title": "Position",
"guides": [{
"value": 1,
"label": "1"
}, {
"value": 150,
"label": "150"
}]
}]
差距
零是一个有效的数字和值。如果您需要显示间隙来代替零值数据点，则需要将这些值设置为 null.
如果您不能直接在数据中替换它，您可以添加一些自定义代码来遍历数据并将零值替换为 null:
for(var i = 0; i < chartData.length; i++) {
if (chartData[i].position == 0)
chartData[i].position = null;
}
为了显示差距，我们还需要为图表设置connect: false。
并且由于您的数据具有不规则的日期间隔，我们还将 gapPeriod 设置为某个更大的周期（比如 10），这样只要您的数据之间的距离大于 1 天，就不会显示间隙相邻数据点。
这是合并后的工作图表：
var chartData = [{"position":"114","datum":"20.12.2014"},{"position":"0","datum":"24.12.2014"},{"position":"127","datum":"29.12.2014"},{"position":"128","datum":"02.01.2015"},{"position":"125","datum":"05.01.2015"},{"position":"132","datum":"09.01.2015"},{"position":"0","datum":"13.01.2015"},{"position":"131","datum":"17.01.2015"},{"position":"0","datum":"20.01.2015"},{"position":"0","datum":"24.01.2015"},{"position":"88","datum":"28.01.2015"},{"position":"89","datum":"01.02.2015"},{"position":"94","datum":"04.02.2015"},{"position":"86","datum":"08.02.2015"},{"position":"80","datum":"12.02.2015"},{"position":"83","datum":"16.02.2015"},{"position":"82","datum":"19.02.2015"},{"position":"0","datum":"23.02.2015"},{"position":"109","datum":"27.02.2015"},{"position":"100","datum":"03.03.2015"},{"position":"98","datum":"06.03.2015"},{"position":"92","datum":"10.03.2015"},{"position":"99","datum":"14.03.2015"},{"position":"97","datum":"18.03.2015"},{"position":"93","datum":"21.03.2015"},{"position":"0","datum":"25.03.2015"},{"position":"0","datum":"29.03.2015"},{"position":"108","datum":"02.04.2015"},{"position":"106","datum":"06.04.2015"},{"position":"109","datum":"10.04.2015"},{"position":"0","datum":"14.04.2015"},{"position":"107","datum":"17.04.2015"},{"position":"114","datum":"21.04.2015"},{"position":"109","datum":"25.04.2015"},{"position":"0","datum":"29.04.2015"},{"position":"111","datum":"02.05.2015"},{"position":"101","datum":"06.05.2015"},{"position":"84","datum":"10.05.2015"},{"position":"0","datum":"14.05.2015"},{"position":"74","datum":"17.05.2015"},{"position":"71","datum":"21.05.2015"},{"position":"72","datum":"25.05.2015"},{"position":"72","datum":"29.05.2015"},{"position":"0","datum":"01.06.2015"},{"position":"66","datum":"05.06.2015"},{"position":"73","datum":"09.06.2015"},{"position":"78","datum":"13.06.2015"},{"position":"72","datum":"16.06.2015"},{"position":"65","datum":"20.06.2015"},{"position":"67","datum":"24.06.2015"},{"position":"72","datum":"28.06.2015"},{"position":"74","datum":"02.07.2015"},{"position":"68","datum":"05.07.2015"},{"position":"67","datum":"09.07.2015"},{"position":"72","datum":"13.07.2015"},{"position":"74","datum":"17.07.2015"},{"position":"73","datum":"21.07.2015"}];
for(var i = 0; i < chartData.length; i++) {
if (chartData[i].position == 0)
chartData[i].position = null;
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataDateFormat": "DD.MM.YYYY",
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"bullet": "round",
"bulletBorderAlpha": 0.5,
"bulletColor": "#FFFFFF",
"bulletSize": 8,
"hideBulletsCount": 50,
"lineThickness": 2,
"useLineColorForBulletBorder": true,
"valueField": "position",
"balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[value]]</div>",
"connect": false,
"gapPeriod": 10
}],
"valueAxes": [{
"integersOnly": true,
"maximum": 150,
"minimum": 1,
"strictMinMax": true,
"reversed": true,
"axisAlpha": 1,
"dashLength": 2,
"position": "left",
"title": "Position",
"guides": [{
"value": 1,
"label": "1"
}, {
"value": 150,
"label": "150"
}]
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":0.2,
"valueLineAlpha":0.2
},
"categoryField": "datum",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
},
"dataProvider": chartData
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
#chartdiv {
width : 100%;
height : 500px;
}
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>
我在尝试了很多设置后遇到了 amCharts 问题。
我想将 y 轴的范围限制在 1-150 之间，并且不希望 amCharts 绘制值为 0 的数据点。x 范围内没有时间段。我创建了一个 fiddle 的实际结果：http://jsfiddle.net/zt9exqwq/5/
var chartData = [{"position":"114","datum":"20.12.2014"},{"position":"0","datum":"24.12.2014"},{"position":"127","datum":"29.12.2014"},{"position":"128","datum":"02.01.2015"},{"position":"125","datum":"05.01.2015"},{"position":"132","datum":"09.01.2015"},{"position":"0","datum":"13.01.2015"},{"position":"131","datum":"17.01.2015"},{"position":"0","datum":"20.01.2015"},{"position":"0","datum":"24.01.2015"},{"position":"88","datum":"28.01.2015"},{"position":"89","datum":"01.02.2015"},{"position":"94","datum":"04.02.2015"},{"position":"86","datum":"08.02.2015"},{"position":"80","datum":"12.02.2015"},{"position":"83","datum":"16.02.2015"},{"position":"82","datum":"19.02.2015"},{"position":"0","datum":"23.02.2015"},{"position":"109","datum":"27.02.2015"},{"position":"100","datum":"03.03.2015"},{"position":"98","datum":"06.03.2015"},{"position":"92","datum":"10.03.2015"},{"position":"99","datum":"14.03.2015"},{"position":"97","datum":"18.03.2015"},{"position":"93","datum":"21.03.2015"},{"position":"0","datum":"25.03.2015"},{"position":"0","datum":"29.03.2015"},{"position":"108","datum":"02.04.2015"},{"position":"106","datum":"06.04.2015"},{"position":"109","datum":"10.04.2015"},{"position":"0","datum":"14.04.2015"},{"position":"107","datum":"17.04.2015"},{"position":"114","datum":"21.04.2015"},{"position":"109","datum":"25.04.2015"},{"position":"0","datum":"29.04.2015"},{"position":"111","datum":"02.05.2015"},{"position":"101","datum":"06.05.2015"},{"position":"84","datum":"10.05.2015"},{"position":"0","datum":"14.05.2015"},{"position":"74","datum":"17.05.2015"},{"position":"71","datum":"21.05.2015"},{"position":"72","datum":"25.05.2015"},{"position":"72","datum":"29.05.2015"},{"position":"0","datum":"01.06.2015"},{"position":"66","datum":"05.06.2015"},{"position":"73","datum":"09.06.2015"},{"position":"78","datum":"13.06.2015"},{"position":"72","datum":"16.06.2015"},{"position":"65","datum":"20.06.2015"},{"position":"67","datum":"24.06.2015"},{"position":"72","datum":"28.06.2015"},{"position":"74","datum":"02.07.2015"},{"position":"68","datum":"05.07.2015"},{"position":"67","datum":"09.07.2015"},{"position":"72","datum":"13.07.2015"},{"position":"74","datum":"17.07.2015"},{"position":"73","datum":"21.07.2015"}];
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataDateFormat": "DD.MM.YYYY",
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"bullet": "round",
"bulletBorderAlpha": 0.5,
"bulletColor": "#FFFFFF",
"bulletSize": 8,
"hideBulletsCount": 50,
"lineThickness": 2,
"useLineColorForBulletBorder": true,
"valueField": "position",
"balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[value]]</div>"
}],
"valueAxes": [{
"integersOnly": true,
"maximum": 150,
"minimum": 1,
"reversed": true,
"axisAlpha": 1,
"dashLength": 2,
"position": "left",
"title": "Position"
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":0.2,
"valueLineAlpha":0.2
},
"categoryField": "datum",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
},
"dataProvider": chartData
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
#chartdiv {
width : 100%;
height : 500px;
}
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>
实际情况如下：
这就是我想要的：
有人有想法吗？非常感谢。
数值轴
要设置值轴的比例，我们可以使用其 minimum and maximum 属性。然而，即使我们设置了这两个，图表也会尝试将值轴增量四舍五入到 "pretty" 数字，因此它仍然会显示 0.
为了解决这个问题，我们将使用另一个值轴 属性 strictMinMax。它将确保我们的值轴刻度在 0 和 15 值处被清晰地切割。
但是我们现在丢失了第一个和最后一个标签。我们将使用 guides 为 1 和 150 个值添加标签。
上面的组合代码是这样的：
"valueAxes": [{
"integersOnly": true,
"maximum": 150,
"minimum": 1,
"strictMinMax": true,
"reversed": true,
"axisAlpha": 1,
"dashLength": 2,
"position": "left",
"title": "Position",
"guides": [{
"value": 1,
"label": "1"
}, {
"value": 150,
"label": "150"
}]
}]
差距
零是一个有效的数字和值。如果您需要显示间隙来代替零值数据点，则需要将这些值设置为 null.
如果您不能直接在数据中替换它，您可以添加一些自定义代码来遍历数据并将零值替换为 null:
for(var i = 0; i < chartData.length; i++) {
if (chartData[i].position == 0)
chartData[i].position = null;
}
为了显示差距，我们还需要为图表设置connect: false。
并且由于您的数据具有不规则的日期间隔，我们还将 gapPeriod 设置为某个更大的周期（比如 10），这样只要您的数据之间的距离大于 1 天，就不会显示间隙相邻数据点。
这是合并后的工作图表：
var chartData = [{"position":"114","datum":"20.12.2014"},{"position":"0","datum":"24.12.2014"},{"position":"127","datum":"29.12.2014"},{"position":"128","datum":"02.01.2015"},{"position":"125","datum":"05.01.2015"},{"position":"132","datum":"09.01.2015"},{"position":"0","datum":"13.01.2015"},{"position":"131","datum":"17.01.2015"},{"position":"0","datum":"20.01.2015"},{"position":"0","datum":"24.01.2015"},{"position":"88","datum":"28.01.2015"},{"position":"89","datum":"01.02.2015"},{"position":"94","datum":"04.02.2015"},{"position":"86","datum":"08.02.2015"},{"position":"80","datum":"12.02.2015"},{"position":"83","datum":"16.02.2015"},{"position":"82","datum":"19.02.2015"},{"position":"0","datum":"23.02.2015"},{"position":"109","datum":"27.02.2015"},{"position":"100","datum":"03.03.2015"},{"position":"98","datum":"06.03.2015"},{"position":"92","datum":"10.03.2015"},{"position":"99","datum":"14.03.2015"},{"position":"97","datum":"18.03.2015"},{"position":"93","datum":"21.03.2015"},{"position":"0","datum":"25.03.2015"},{"position":"0","datum":"29.03.2015"},{"position":"108","datum":"02.04.2015"},{"position":"106","datum":"06.04.2015"},{"position":"109","datum":"10.04.2015"},{"position":"0","datum":"14.04.2015"},{"position":"107","datum":"17.04.2015"},{"position":"114","datum":"21.04.2015"},{"position":"109","datum":"25.04.2015"},{"position":"0","datum":"29.04.2015"},{"position":"111","datum":"02.05.2015"},{"position":"101","datum":"06.05.2015"},{"position":"84","datum":"10.05.2015"},{"position":"0","datum":"14.05.2015"},{"position":"74","datum":"17.05.2015"},{"position":"71","datum":"21.05.2015"},{"position":"72","datum":"25.05.2015"},{"position":"72","datum":"29.05.2015"},{"position":"0","datum":"01.06.2015"},{"position":"66","datum":"05.06.2015"},{"position":"73","datum":"09.06.2015"},{"position":"78","datum":"13.06.2015"},{"position":"72","datum":"16.06.2015"},{"position":"65","datum":"20.06.2015"},{"position":"67","datum":"24.06.2015"},{"position":"72","datum":"28.06.2015"},{"position":"74","datum":"02.07.2015"},{"position":"68","datum":"05.07.2015"},{"position":"67","datum":"09.07.2015"},{"position":"72","datum":"13.07.2015"},{"position":"74","datum":"17.07.2015"},{"position":"73","datum":"21.07.2015"}];
for(var i = 0; i < chartData.length; i++) {
if (chartData[i].position == 0)
chartData[i].position = null;
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataDateFormat": "DD.MM.YYYY",
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"bullet": "round",
"bulletBorderAlpha": 0.5,
"bulletColor": "#FFFFFF",
"bulletSize": 8,
"hideBulletsCount": 50,
"lineThickness": 2,
"useLineColorForBulletBorder": true,
"valueField": "position",
"balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[value]]</div>",
"connect": false,
"gapPeriod": 10
}],
"valueAxes": [{
"integersOnly": true,
"maximum": 150,
"minimum": 1,
"strictMinMax": true,
"reversed": true,
"axisAlpha": 1,
"dashLength": 2,
"position": "left",
"title": "Position",
"guides": [{
"value": 1,
"label": "1"
}, {
"value": 150,
"label": "150"
}]
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":0.2,
"valueLineAlpha":0.2
},
"categoryField": "datum",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
},
"dataProvider": chartData
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
#chartdiv {
width : 100%;
height : 500px;
}
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>