Amcharts,将垂直valueAxis中的0替换为1
Amcharts, replace 0 with 1 in vertical valueAxis
正在寻找一种方法使下表在 1 而不是 0 处达到顶峰。
我可以在 valueAxes
配置部分设置 minimum: 1
,但这会强制 1 成为显示内容的下限,而不管该行出现在何处。
我在 amcharts 文档中没有看到类似的东西,所以我实际上认为这不可能,但我经常犯错所以我希望是这样。
没有任何一种方法可以满足您的需求。
结合(或不结合)strictMinMax
使用 minimum: 1
会强制比例从特定数字开始,而不管图表变量的实际范围如何。
您可以尝试更多 "involved" 方法。
预先计算最小值
在构建图表之前,循环浏览图表数据并设置 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" ] );
#chartdiv {
width: 400px;
height: 300px;
}
<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>
将“0”标签换成“1”
使用值轴' labelFunction
简单地将零替换为 1:
var chart = AmCharts.makeChart("chartdiv", {
...
"valueAxes": [{
"reversed": true,
"labelFunction": function( label ) {
return label === 0 ? 1 : label;
}
}],
...
});
请注意,这不会影响实际值轴刻度。但是,差异可能并不明显。
正在寻找一种方法使下表在 1 而不是 0 处达到顶峰。
我可以在 valueAxes
配置部分设置 minimum: 1
,但这会强制 1 成为显示内容的下限,而不管该行出现在何处。
我在 amcharts 文档中没有看到类似的东西,所以我实际上认为这不可能,但我经常犯错所以我希望是这样。
没有任何一种方法可以满足您的需求。
结合(或不结合)strictMinMax
使用 minimum: 1
会强制比例从特定数字开始,而不管图表变量的实际范围如何。
您可以尝试更多 "involved" 方法。
预先计算最小值
在构建图表之前,循环浏览图表数据并设置 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" ] );
#chartdiv {
width: 400px;
height: 300px;
}
<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>
将“0”标签换成“1”
使用值轴' labelFunction
简单地将零替换为 1:
var chart = AmCharts.makeChart("chartdiv", {
...
"valueAxes": [{
"reversed": true,
"labelFunction": function( label ) {
return label === 0 ? 1 : label;
}
}],
...
});
请注意,这不会影响实际值轴刻度。但是,差异可能并不明显。