Highcharts 高图:散点图中X轴和Y轴在零处交叉

Highcharts 高图:散点图中X轴和Y轴在零处交叉,highcharts,Highcharts,在highcharts中,我想绘制一个散点图/气泡图,其中x值范围为-50到+50,y值范围为-100到+100。有没有办法绘制x轴和y轴,使它们在图表中心的零交叉 我曾尝试在轴中使用“偏移”参数,该参数确实会移动轴,例如,但这种方法存在以下问题: 无法动态设置偏移参数,因此如果序列更新并更改最小/最大x/y值,轴将不再在零处交叉 如果缩放,轴将不再在零处相交 考虑到div大小、边距、标题等,以像素为单位计算偏移量是相当困难的 调整包含div的大小会导致所需的轴偏移位置发生更改 Highchar

在highcharts中,我想绘制一个散点图/气泡图,其中x值范围为-50到+50,y值范围为-100到+100。有没有办法绘制x轴和y轴,使它们在图表中心的零交叉

我曾尝试在轴中使用“偏移”参数,该参数确实会移动轴,例如,但这种方法存在以下问题:

  • 无法动态设置偏移参数,因此如果序列更新并更改最小/最大x/y值,轴将不再在零处交叉
  • 如果缩放,轴将不再在零处相交
  • 考虑到div大小、边距、标题等,以像素为单位计算偏移量是相当困难的
  • 调整包含div的大小会导致所需的轴偏移位置发生更改

  • 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:

    • x/yAxis.matchAxis.value
      -设置应从相反轴拾取的值。默认值为0
    • x/yAxis.matchAxis.index
      -使用多个轴时,设置应使用哪个相反轴进行计算的索引。默认值为0
    设置,例如
    yAxis.matchAxis={}
    是完全正确的:(因为默认设置)

    强制的选项列表(在插件中):

    • x/yAxis.labels.reserveSpace
      为false
    • x/yAxis.title.reserveSpace
      为false
    • x/yAxis.偏移量
      为负值(例如-50)
    • xAxis.contract
      设置为true
    • yAxis.contract
      设置为false
    注意:仅使用v7.2.0进行测试

    旧解决方案(v3+)

    目前唯一的解决方案是使用偏移参数。但是,由于Highcharts 3.0,您可以自由控制该属性并更新axis:

    chart.yAxis[index].update( options );
    

    其中“选项”是一个对象,具有用于yAxis的选项,包括偏移。要获得像素位置,可以使用内部函数
    chart.xAxis[index].translate(value)
    (有点老套,但很管用)。因此,当两者结合在一起时,请参见示例:

    非常感谢您的回答。这正是我想知道的。你有Highcharts 3.0的发布日期吗?我有没有办法使用“transform”来移动轴?这取决于我们在测试版中会发现多少bug。我们假设在三月份发布Highcharts 3.0,请参阅:在文档中我在哪里可以找到这个“translate”函数和其他类似的函数,或者它没有文档化?translate是一种内部方法。现在您可以使用和