2013-07-24 122 views
0

我使用highcharts完成折线图。 x轴表示月和y轴表示汽车。 8月份,我有2 y的价值,我如何在图表上显示2个数据点?看起来数据点重叠?Highcharts折线图2 y轴至一个x轴

+0

您可以为我们提供一个http://jsFiddle.net,我们可以看到你尝试过什么,我们可以试着帮你。 –

+0

您可以使用分散系列,它允许为相同的x添加两个点。 –

回答

0

使用分散

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Sample title</title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
    <script src="http://code.highcharts.com/modules/exporting.js"></script> 


<script> 


    $(function() { 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container' 
     }, 
     title: { 
       text: 'Predicted Population Peaks' 
      }, 
      xAxis: { 
       categories: [ 
        'Jan', 
        'Feb', 
        'Mar', 
        'Apr', 
        'May', 
        'Jun', 
        'Jul', 
        'Aug', 
        'Sep', 
        'Oct', 
        'Nov', 
        'Dec' 
       ] 
      }, 
    yAxis: { 
       min: 0, 
       title: { 
        text: 'Population' 
       } 
      }, 
     series: [{ 
      type:'column', 
      name: 'Week 1', 
      data: [6.75, 19.38, 36.17, 84.2, 18.58, 9.38, 23.08, 13.21, 24.92, 24.50, 22.92, 44.79] 

     },{ 
      type:'column', 
      name: 'Week 2', 
      data: [9.29, 13.83, 25.38, 21.54, 22.67, 8.79, 35.92, 44.71, 25.92, 77.38, 71.54, 28.33] 
     }, 
     {   
      type:'column', 
      name: 'Week 3', 
      data: [6.63, 60.88, 29.58, 26.25, 21.79, 18.79, 18.42, 45.00, 35.50, 64.71, 39.88, 28.33] 


     }, 
     { 
       type:'column', 
       name: 'Week 4', 
       data: [17.42, 41.33, 18.75, 29.54, 16.58, 20.46, 21.17, 45.96, 26.25, 50.13, 39.00, 16.75] 

     }, 
     { 
       type:'column', 
     name: 'Week 5', 
       data: [0, 0, 26.17, 0, 0, 9.96, 0, 26.00, 0, 0, 18.83, 0]  

     }, 
     { 
      name: 'Generation', 
       color: '#89A54E', 
       type: 'spline', 
       data: [{ 
       y: 19.38, 
       x:0 
      }, 

      { 
       y: 31.38, 
       x:1 
      }, 
      { 
       y: 11.38, 
       x:2 
      }, 
      { 
       y: 33.38, 
       x:3 
      }, 
      { 
       y: 43.38, 
       x:4 
      }, 
      { 
       y: 53.38, 
       x:5 
      }, 
      { 
       y: 63.38, 
       x:6 
      }, 
      { 
       y: 73.38, 
       x:7 
      }, 

      { 
       y: 21.38, 
       x:7 
      }, 
      { 
       y: 83.38, 
       x:8 
      }, 
      { 
       y: 93.38, 
       x:9 
      }, 
      { 
       y: 20.38, 
       x:10 
      }, 
      { 
       y: 41.38, 
       x:11 
      } 
      ]   

     } 
     ] 
    }); 
}); 

    </script> 


    </head> 
    <body> 
<div id="container" style="height: 400px; width: 500px"></div> 
    </body> 
</html>