Highcharts 高图:散点图中X轴和Y轴在零处交叉
在highcharts中,我想绘制一个散点图/气泡图,其中x值范围为-50到+50,y值范围为-100到+100。有没有办法绘制x轴和y轴,使它们在图表中心的零交叉 我曾尝试在轴中使用“偏移”参数,该参数确实会移动轴,例如,但这种方法存在以下问题:Highcharts 高图:散点图中X轴和Y轴在零处交叉,highcharts,Highcharts,在highcharts中,我想绘制一个散点图/气泡图,其中x值范围为-50到+50,y值范围为-100到+100。有没有办法绘制x轴和y轴,使它们在图表中心的零交叉 我曾尝试在轴中使用“偏移”参数,该参数确实会移动轴,例如,但这种方法存在以下问题: 无法动态设置偏移参数,因此如果序列更新并更改最小/最大x/y值,轴将不再在零处交叉 如果缩放,轴将不再在零处相交 考虑到div大小、边距、标题等,以像素为单位计算偏移量是相当困难的 调整包含div的大小会导致所需的轴偏移位置发生更改 Highchar
Highcharts v7.2+解决方案 强制某些选项以防止图表为轴保留空间,然后使用插件:
(功能(H){
H.addEvent(
H.安讯士,
'初始化',
职能(e){
if(定义为H.e.userOptions.matchAxis)){
合并(
是的,
e、 用户选项{
标签:{
reserveSpace:false
},
标题:{
reserveSpace:false
},
偏移量:-1,
反面:this.isXAxis?对:错
}
);
}
}
);
H.addEvent(
H.图表,
“渲染”,
函数(){
让图表=这个;
图表.轴.forEach(功能(轴){
让我们来抵消,
matchAxis=axis.options.matchAxis,
translate=axis.horiz?'translateY':'translateX',
新翻译={},
偏移=axis.options.offset | | 0,
crisp=axis.options.lineWidth%2,
其他轴=axis.isXAxis?chart.yAxis:chart.xAxis;
如果(H.定义(匹配轴)){
newOffset=otherAxes[matchAxis.index | | 0].toPixels(matchAxis.value | | 0,true);
新翻译[翻译]=新偏移+偏移+清晰;
if(axis.axisGroup){
axis.axisGroup.animate(新翻译);
}
if(轴标签组){
axis.labelGroup.animate(新翻译);
}
}
});
}
);
})(高图);
演示:
插件的API:
-设置应从相反轴拾取的值。默认值为0x/yAxis.matchAxis.value
-使用多个轴时,设置应使用哪个相反轴进行计算的索引。默认值为0x/yAxis.matchAxis.index
yAxis.matchAxis={}
是完全正确的:(因为默认设置)
强制的选项列表(在插件中):
为falsex/yAxis.labels.reserveSpace
为falsex/yAxis.title.reserveSpace
为负值(例如-50)x/yAxis.偏移量
设置为truexAxis.contract
设置为falseyAxis.contract
chart.yAxis[index].update( options );
其中“选项”是一个对象,具有用于yAxis的选项,包括偏移。要获得像素位置,可以使用内部函数
chart.xAxis[index].translate(value)
(有点老套,但很管用)。因此,当两者结合在一起时,请参见示例:非常感谢您的回答。这正是我想知道的。你有Highcharts 3.0的发布日期吗?我有没有办法使用“transform”来移动轴?这取决于我们在测试版中会发现多少bug。我们假设在三月份发布Highcharts 3.0,请参阅:在文档中我在哪里可以找到这个“translate”函数和其他类似的函数,或者它没有文档化?translate是一种内部方法。现在您可以使用和