AmXYChart - 隠し防ぐためにパディングを追加する方法は

Question

をオーバーフロー私は、x軸としてY軸と顧客としてパーセントでシンプルなXYグラフのグラフを作成し、私は184点の集合で... 0〜100％のデータをランダム化してきました。下側/上側領域の値を表示するのが少し難しいです。私はデモンストレーションのためのイメージを含んでいます。

ここに私のconfigファイルを、私はオフセット/パディングのいくつかの並べ替えを見つけるように見えるカント？

{ 
    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の範囲外であるためにあなたの最小値と最大値を変更せずにありません。デモとして-10を使用して、以下の

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

を：あなたはのlabelFunctionを使用しているので、あなたがしたい場合には、例えば、0から100までパーセント以上と以下のいずれかのラベルを表示しないように、あなたはそれを設定することができます最小値と最大値として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 nesはチャートによって自動生成されます。たとえば、次のように

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>