AmCharts：限制 Y 轴范围并消除非周期性间隙

Question

在尝试了很多设置后，我遇到了 amCharts 的问题。

我想将 y 轴的范围限制在 1-150 之间，并且不希望 amCharts 绘制值为 0 的数据点。x 范围内没有时间段。我创建了一个实际结果的小提琴：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>				

这是它的实际外观：

这就是我想要的：

有人知道吗？非常感谢。

Answer 1

价值轴

要设置值轴的比例，我们可以使用它的minimum 和maximum 属性。但是，即使我们设置了这两个，图表也会尝试将值轴增量四舍五入为“漂亮”的数字，因此它仍然会显示 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>