Question

我使用highcharts完成了折线图。 x轴表示月，y轴表示汽车。 8月，我有2 y值，如何在图表上显示2个数据点？数据点似乎重叠了吗？

Answer 1

使用分散

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

Highcharts折线图2 y轴到一个x轴

1 个答案: