AmXYChart - 如何添加填充以防止隐藏溢出

Question

我创建了一个简单的XY图表图表​​，其中百分比为y轴，客户为x轴，我将数据随机化为0 ... 100％，一组184点。并且显示下/上区域值有一点困难。我已经为演示提供了一张图片。

这是我的配置文件，我似乎无法找到某种偏移/填充？

{
  type: 'xy',
  addClassNames: true,
  autoMargins: false,
  marginLeft: 67,
  marginBottom: 55,
  graphs: [{
    balloonFunction,
    bullet: 'round',
    xField: 'customers',
    yField: 'rate',
    bulletSize: 16,
    lineColorField: 'color',
  }],
  valueAxes: [
    {
      title,
      borderThickness: 0,
      axisThickness: 2,
      maximum: 100,
      labelFunction: (e,val) => { return val + "%"; },
    },
    {
      title,
      position: 'bottom',
      axisAlpha: 0,
      borderThickness: 0,
      axisThickness: 0,
      gridThickness: 0,
    },
  ],
  dataProvider: data,
};

感谢。

Answer 1

如果不将最小值和最大值修改为超出0-100范围以适应，则无法填充此内容。由于您使用的是labelFunction，因此您可以进行设置，以便在需要时不会显示0-100％以上和以下的任何标签，例如：

labelFunction: (e, val) => { return (val > 100 || val < 0 ? "" : val + "%"); }

下面的演示使用-10作为最小值，110作为最大值：

var data = [{"rate": 99, "customers": 2421},{"rate": 76,"customers": 100},{"rate": 68,"customers": 1711},{"rate": 38,"customers": 313},{"rate": 94,"customers": 393},{"rate": 57,"customers": 946},{"rate": 99,"customers": 1772},{"rate": 20,"customers": 2168},{"rate": 100,"customers": 754},{"rate": 40,"customers": 121},{"rate": 51,"customers": 2412},{"rate": 15,"customers": 2364},{"rate": 32,"customers": 2161},{"rate": 55,"customers": 1506},{"rate": 29,"customers": 986},{"rate": 0,"customers": 698},{"rate": 4,"customers": 1285},{"rate": 22,"customers": 2108},{"rate": 17,"customers": 2081},{"rate": 79,"customers": 251},{"rate": 48,"customers": 258},{"rate": 41,"customers": 1541},{"rate": 35,"customers": 1132},{"rate": 86,"customers": 1213},{"rate": 1,"customers": 1936},{"rate": 51,"customers": 1737},{"rate": 5,"customers": 2447},{"rate": 60,"customers": 305},{"rate": 37,"customers": 776},{"rate": 64,"customers": 886}];

var chart = AmCharts.makeChart("chartdiv", {
  type: 'xy',
  addClassNames: true,
  autoMargins: false,
  marginLeft: 67,
  marginBottom: 55,
  graphs: [{
    //balloonFunction,
    bullet: 'round',
    xField: 'customers',
    yField: 'rate',
    bulletSize: 16,
    lineAlpha: 0, //for testing only
    lineColorField: 'color',
  }],
  valueAxes: [
    {
      title: "Rate (%)",
      borderThickness: 0,
      axisThickness: 2,
      maximum: 110,
      minimum: -10,
      labelFunction: (e,val) => { return (val > 100 || val < 0 ? "" : val + "%"); },
    },
    {
      title: "Customers",
      position: 'bottom',
      axisAlpha: 0,
      borderThickness: 0,
      axisThickness: 0,
      gridThickness: 0,
    },
  ],
  dataProvider: data,
});

<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/xy.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>

如果要从新的最小值和最大值生成的附加点中删除额外的网格线，则必须使用参考线作为网格线和标签，而不是图表自动生成的网格线和标签。例如：

valueAxes: [{
    guides: [{
      "value": 0,
      "label": "0%",
      "lineAlpha": .2,
      "tickLength": 5
    },
    // repeat for each tick/grid line
    ],
    "gridAlpha": 0,
    "tickLength": 0,
    "labelsEnabled": false,
    // ...

演示：

var data = [{"rate": 99, "customers": 2421},{"rate": 76,"customers": 100},{"rate": 68,"customers": 1711},{"rate": 38,"customers": 313},{"rate": 94,"customers": 393},{"rate": 57,"customers": 946},{"rate": 99,"customers": 1772},{"rate": 20,"customers": 2168},{"rate": 100,"customers": 754},{"rate": 40,"customers": 121},{"rate": 51,"customers": 2412},{"rate": 15,"customers": 2364},{"rate": 32,"customers": 2161},{"rate": 55,"customers": 1506},{"rate": 29,"customers": 986},{"rate": 0,"customers": 698},{"rate": 4,"customers": 1285},{"rate": 22,"customers": 2108},{"rate": 17,"customers": 2081},{"rate": 79,"customers": 251},{"rate": 48,"customers": 258},{"rate": 41,"customers": 1541},{"rate": 35,"customers": 1132},{"rate": 86,"customers": 1213},{"rate": 1,"customers": 1936},{"rate": 51,"customers": 1737},{"rate": 5,"customers": 2447},{"rate": 60,"customers": 305},{"rate": 37,"customers": 776},{"rate": 64,"customers": 886}];

var chart = AmCharts.makeChart("chartdiv", {
  type: 'xy',
  addClassNames: true,
  autoMargins: false,
  marginLeft: 67,
  marginBottom: 55,
  graphs: [{
    //balloonFunction,
    bullet: 'round',
    xField: 'customers',
    yField: 'rate',
    bulletSize: 16,
    lineAlpha: 0, //for testing only
    lineColorField: 'color',
  }],
  valueAxes: [
    {
      title: "Rate (%)",
      borderThickness: 0,
      axisThickness: 2,
      maximum: 110,
      minimum: -10,
        guides: [{
          value: 0,
          label: "0%",
          lineAlpha: .2,
          tickLength: 5
        },{
          value: 20,
          label: "20%",
          lineAlpha: .2,
          tickLength: 5
        },{
          value: 40,
          label: "40%",
          lineAlpha: .2,
          tickLength: 5
        },{
          value: 60,
          label: "60%",
          lineAlpha: .2,
          tickLength: 5
        },{
          value: 80,
          label: "80%",
          lineAlpha: .2,
          tickLength: 5
        },{
          value: 100,
          label: "100%",
          lineAlpha: .2,
          tickLength: 5
        }],
        gridAlpha: 0,
        tickLength: 0,
        labelsEnabled: false
    },
    {
      title: "Customers",
      position: 'bottom',
      axisAlpha: 0,
      borderThickness: 0,
      axisThickness: 0,
      gridThickness: 0,
    },
  ],
  dataProvider: data,
});

<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/xy.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>