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>