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>

如果要删除由新的最小值和最大值产生的附加分多余的网格线，你将不得不使用指南为您网格线和标签，而不是o由图表自动生成。例如：

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>