Javascript Highcharts:更改比例大小
假设你有一个x轴是[0,3,6,…],一个y轴是[0,5,10,…] Highcharts会自动处理这些值,因此y方向上的差异5看起来不会比x方向上的差异3大 如何更改值之间的距离/使y轴上的5与x轴上更改的5/3一样大?(因此,从(0,0)到点(5,5)的p.e.线具有45°角) 代码示例:Javascript Highcharts:更改比例大小,javascript,highcharts,scale,Javascript,Highcharts,Scale,假设你有一个x轴是[0,3,6,…],一个y轴是[0,5,10,…] Highcharts会自动处理这些值,因此y方向上的差异5看起来不会比x方向上的差异3大 如何更改值之间的距离/使y轴上的5与x轴上更改的5/3一样大?(因此,从(0,0)到点(5,5)的p.e.线具有45°角) 代码示例: $.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/usdeur.json', functio
$.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/usdeur.json', function (data) {
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
取自
加载事件中的,您可以计算和调整图表的高度或宽度:
chart: {
events: {
load: function() {
var xAxis = this.xAxis[0],
yAxis = this.yAxis[0];
// Adjust xAxis
this.setSize(
yAxis.height / (yAxis.max - yAxis.min) *
(xAxis.max - xAxis.min) + this.plotLeft + this.chartWidth -
(this.plotLeft + this.plotWidth),
null,
false
);
}
}
},
现场演示:
或者,如果不想更改尺寸,可以调整其中一个轴极限:
chart: {
events: {
load: function() {
var xAxis = this.xAxis[0],
yAxis = this.yAxis[0],
xAxisMax = xAxis.width /
(yAxis.height / (yAxis.max - yAxis.min)),
yAxisMax = yAxis.height /
(xAxis.width / (xAxis.max - xAxis.min));
if (xAxisMax < xAxis.max) {
this.update({
yAxis: {
max: yAxisMax - yAxis.min
}
}, true, true, false);
} else {
this.update({
xAxis: {
max: xAxisMax - xAxis.min
}
}, true, true, false);
}
}
}
},
图表:{
活动:{
加载:函数(){
var xAxis=this.xAxis[0],
yAxis=this.yAxis[0],
xAxisMax=xAxis.width/
(yAxis.height/(yAxis.max-yAxis.min)),
yAxisMax=yAxis.height/
(xAxis.width/(xAxis.max-xAxis.min));
if(xAxisMax
现场演示:
API参考:
提供一些代码,说明您为实现目标所做的工作,可能该图表与演示链接中的图表相似,只是数据不同。让我们假设您有此图表:您希望X轴0-5之间的距离与Y轴0-5之间的距离相同,对吗?@Kabulan0lak正确!