English | 正體中文 | 简体中文

双Y轴折线图

如果你的图表要使用到2组资料来源, 需要多个X或Y轴来显示资料,
你必须手动设定axis number如下..
//这会显示2个Y轴

{ 
  //这是第一个Y轴
  data: data1, 
  label: "data set 1"
},
{ 
  //这是第二个Y轴
  data: data2,
  label: "data set 2",
  yaxis: 2 //这里要设定第二个Y轴为2
}

当你使用到2个轴以上时, 要设定axis属性时必须改用yaxes 而不是yaxis
//这会显示一个X轴和二个Y轴

xaxis: {
    mode: "time",
    timeformat: "%0m/%0d %0H:%0M"
},
yaxes: [
    {
        //[第一个轴]
        //如果没有要设定, 就留空白
    },{
        //[第二个轴]
        position: "right"  //设定标签是显示在图表的右方或是左方
    }
]


范例程式码Expand
<!-- HTML -->
<div id="example-section7">
    <div id="flotcontainer" style="width: 600px;height:200px; text-align: center; margin:0 auto;">
    </div>
</div>


<!-- Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://www.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript">
var data7_1 = [
    [1354586000000, 153], [1354587000000, 658], [1354588000000, 198],
    [1354589000000, 663], [1354590000000, 801], [1354591000000, 1080],
    [1354592000000, 353], [1354593000000, 749], [1354594000000, 523],
    [1354595000000, 258], [1354596000000, 688], [1354597000000, 364]
];

var data7_2 = [
    [1354586000000, 53], [1354587000000, 65], [1354588000000, 98],
    [1354589000000, 83], [1354590000000, 80], [1354591000000, 108],
    [1354592000000, 120], [1354593000000, 74], [1354594000000, 23],
    [1354595000000, 79], [1354596000000, 88], [1354597000000, 36]
];

$(function () {        
    $.plot($("#example-section7 #flotcontainer"),
        [
            {
              data: data7_1,
              label: "Page View",
              lines: { fill: true}

            },
            {
              data: data7_2,
              label: "Online User",
              points: { show: true },
              lines: { show: true},
              yaxis: 2
            }
        ],
        {            
            grid: {
                backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
            },
            xaxis: {
                mode: "time",
                timeformat: "%0m/%0d %0H:%0M"
            },
            yaxes: [
                {
                    /* First y axis */
                },
                {
                    /* Second y axis */
                    position: "right"  /* left or right */
                }
            ]      
        }
    );
});
</script>
在线测试程序


双X轴折线图


范例程式码Expand
<!-- HTML -->
<div id="example-section8">
    <div id="flotcontainer" style="width: 600px;height:200px; text-align: center; margin:0 auto;">
    </div>
</div>


<!-- Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://www.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript">
var data8_1 = [
    [1354586000000, 153], [1354587000000, 658], [1354588000000, 198],
    [1354589000000, 663], [1354590000000, 801], [1354591000000, 1080],
    [1354592000000, 353], [1354593000000, 749], [1354594000000, 523],
    [1354595000000, 258], [1354596000000, 688], [1354597000000, 364]
];

var data8_2 = [
    [1354586000000, 53], [1354587000000, 65], [1354588000000, 98],
    [1354589000000, 83], [1354590000000, 80], [1354591000000, 108],
    [1354592000000, 120], [1354593000000, 74], [1354594000000, 23],
    [1354595000000, 79], [1354596000000, 88], [1354597000000, 36]
];

$(function () {        
    $.plot($("#example-section8 #flotcontainer"),
        [
            {
              data: data8_1,
              label: "Page View",
              lines: { fill: true}

            },
            {
              data: data8_2,
              label: "Online User",
              points: { show: true },
              lines: { show: true},
              xaxis: 2  /* set second x axis */
            }
        ],
        {            
            grid: {
                backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
            },
            xaxes: [
                {
                    /* First x axis */
                    mode: "time",
                    timeformat: "%0m/%0d %0H:%0M"
                },
                {
                    /* Second x axis */
                    mode: "time",
                    timeformat: "%0H:00",                    
                    position: "bottom"  /* top or bottom */
                }
            ],
            yaxis: {
                /* here you can configure y axis */
            }     
        }
    );
});
</script>
在线测试程序

更多范例
 
© 2012 PureExample.com contact