在highchart中x轴上的相同比例 [英] same scale on x y axis in highchart

问题描述

$ b

  $（function（）函数使用Javascript和highcharts绘制轨迹， {
 
 $（'＃container'）。highcharts（{
图表：{
 type：'line'
}，
 
 title：{
 text：'PLOT'
}，
 
 xAxis：{
 title：{
 text：'X'
} ，
}，
 
 yAxis：{
 title：{
 text：'Y'
}，
}，
 
系列：[{
名称：'Trajectory'，
 data：[[1,2]，[5,0]，[0,0]，[3,4]] 
}] 
}）; 
}）; 
  

（

  xAxis：{
 height：200，
 width：200，
 title：{
 text：'X'
}，
 min：0，
 max：6 
}， 
 
 yAxis：{
 height：200，
 width：200，
 title：{
 text：'Y'
}，
分钟：0，
最多：6 
}，
  

我还添加了 min 和 max 以确保两个轴具有相同的比例。

I am trying to plot a trajectory using Javascript and highcharts, similarly to this minimal example:

$(function () { 

  $('#container').highcharts({
    chart: {
        type: 'line'
    },

    title: {
        text: 'PLOT'
    },

    xAxis: {
        title: {
            text: 'X'
        },
    },

    yAxis: {
        title: {
            text: 'Y'
        },
    },

    series: [{
        name: 'Trajectory',
        data: [[1,2],[5,0],[0,0],[3,4]]
    }]
  });
});

( http://jsfiddle.net/LLExL/3614/ )

Since the unit for the values on x and y is meters, I would like to scale equally both the axis, otherwise my trajectory will end up being highly distorted (if you're familiar with Matlab, I want to reach the same result as in the 'axis equal' option for the standard matlab 'plot' function: )

Do you have any ideas on how I can achieve the same result in highcharts? Thank you !

解决方案

You can control width and height for x/yAxis setting width/height options: http://jsfiddle.net/LLExL/3622/

    xAxis: {
        height: 200, 
        width: 200,
        title: {
            text: 'X'
        },
        min: 0,
        max: 6
    },

    yAxis: {
        height: 200,            
        width: 200,
        title: {
            text: 'Y'
        },
        min: 0,
        max: 6
    },

I also added min and max to make sure both axes have the same scale.

这篇关于在highchart中x轴上的相同比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！