Amcharts,在垂直值中将0替换为1 Axis

时间:2015-05-20 23:47:46

标签: javascript amcharts

寻找一种方法,使下面的图表在1而不是0时最高。

enter image description here

我可以在minimum: 1配置部分设置valueAxes,但强制1是其显示内容的下限,无论线条出现在哪里。

我在amcharts文档中没有看到这样的内容,所以我实际上并不认为它可能,但我经常出错,所以我希望是这样的。

1 个答案:

答案 0 :(得分:2)

没有一线解决方案可以满足您的需求。

minimum: 1与({或3}}结合使用会强制比例从特定数字开始,而不管图表变量的实际范围如何。

您可以尝试更多"参与"方法

预先计算最小值

在图表构建之前,循环浏览图表数据并仅在有值接近的情况下设置minimum



/**
 * Create the chart
 */
var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "path": "http://www.amcharts.com/lib/3/",
  "dataProvider": [{
    "year": "1950",
    "value": 9
  }, {
    "year": "1951",
    "value": 30
  }, {
    "year": "1952",
    "value": 35
  }, {
    "year": "1953",
    "value": 25
  }, {
    "year": "1954",
    "value": 70
  }, {
    "year": "1955",
    "value": 45
  }, {
    "year": "1956",
    "value": 55
  }],
  "valueAxes": [{
    "reversed": true,
    // these are the made up properties that are used by our custom code
    // set value axis minimum with "tentativeMinimum" if there are
    // values withing "minimumThreshold" to it
    "tentativeMinimum": 1,
    "minimumThreshold": 9
  }],
  "graphs": [{
    "id": "g1",
    "bullet": "round",
    "lineThickness": 2,
    "type": "smoothedLine",
    "valueField": "value"
  }],
  "categoryField": "year",
  "categoryAxis": {
    "labelsEnabled": false,
  }
});

/**
 * Add chart pre-processor
 */
AmCharts.addInitHandler( function( chart ) {
  
  // check if there are any value axes defined
  if ( typeof chart.valueAxes !== "object" || ! chart.valueAxes.length )
    return;
  
  // check if chart's value axis has "tentativeMinimum" set
  // For the sake of simplicity we're just gonna take the first 
  // value axis and first graph.
  // Normally we would want to check all value axes and their attached
  // graphs to check for their respective values.
  var axis = chart.valueAxes[0];
  if ( axis.tentativeMinimum === undefined || axis.minimumThreshold === undefined )
    return;
  
  // get first charts valueField to check agains
  var field = chart.graphs[0].valueField;
  
  // cycle through the data
  var min;
  for ( var x = 0; x < chart.dataProvider.length; x++ ) {
    if ( min === undefined || ( chart.dataProvider[x][field] < min ) )
      min = chart.dataProvider[x][field];
  }
  
  // check if min is within the threshold
  if ( min <= ( axis.tentativeMinimum + axis.minimumThreshold ) )
    axis.minimum = axis.tentativeMinimum;
  
}, [ "serial" ] );
&#13;
#chartdiv {
  width: 400px;
  height: 300px;
}
&#13;
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
&#13;
&#13;
&#13;

换出&#34; 0&#34;标签为&#34; 1&#34;

使用值轴&#39; labelFunction只需将1替换为0:

var chart = AmCharts.makeChart("chartdiv", {
  ...
  "valueAxes": [{
    "reversed": true,
    "labelFunction": function( label ) {
      return label === 0 ? 1 : label;
    }
  }],
  ...
});

请注意,这不会影响实际值轴刻度。但是,差异可能并不明显。