Question

我对flot.js很新。我尝试在同一个图表中用一个条形和一条线绘制我自己的图形。 X轴是月（1月到12月），左边的y 1是条形图显示数据，右边的y 2是折线图。

这是我的代码，我尝试了几次，查看现有教程，但无法正确绘制。

有人能指出我，非常感谢你。

    <style type="text/css">
    #flotcontainer {
        width: 600px;
        height: 200px;
        text-align: center;
        margin: 0 auto;
    }
    </style>


    <!-- Javascript -->
    <script type="text/javascript">


     var ticks = [
        [1, "Jan"], [2, "Feb"], [3, "Mar"], [4, "Apr"], [5, "May"], [6, "Jun"],
        [7, "Jul"], [8, "Aug"], [9, "Sep"], [10, "Oct"], [11, "Nov"],         [12, "Dec"]
    ];

     var s3 = [[1, 6.8], [2, 11.9], [3, 20.9], [4, 24], [5, 31], 
            [6, 38], [7, 43], [8, 51], [9, 57.3], [10, 62.2], [11, 64.7], [12, 70.8]];
     var s4 = [[1, 6.8], [2, 5.1], [3, 9], [4, 3.1], [5, 6], 
            [6, 7], [7, 5], [8, 8], [9, 6.3], [10, 4.9], [11, 2.5], [12, 6.1]];

    $(function () {        
        $.plot($("#flotcontainer"),
            [
                {
                  data: s3,
                  label: "Page View",
                    bars: {
                    show: true,
                    barWidth: 12*24*60*60*1000,
                    fill: true,
                    lineWidth: 1
                },

                },
                {
                  data: s4,
                  label: "Online User",
                  points: { show: true },
                  lines: { show: false},
                  yaxis: 2
                }
            ],
            {            
                grid: {
                    backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
                },
                xaxis: {
                    ticks: ticks,
                                tickSize: [1, "month"],
                axisLabel: "Months",
                },
                yaxes: [
                    {
                        /* First y axis */
                        position: "right"
                    },
                    {
                        /* Second y axis */
                        position: "left"  /* left or right */
                    }
                ]      
            }
        );
    });
    </script>

    <!-- HTML -->
    <div id="flotcontainer"></div>

Answer 1

只需将您的barwidth更改为1或更小的相似值（请参阅此fiddle示例）：

    bars: {
        show: true,
        barWidth: 1, //12 * 24 * 60 * 60 * 1000,
        fill: true,
        lineWidth: 1
    },

你的酒吧太宽了，他们挤压了图表左侧的所有数据。如果您使用时间模式（并相应地更改了数据），您使用的宽度将是正确的。

这是一个second version of the fiddle，中心对齐的条形图和你写的线条图（你最初只有一个没有直线的点图）。

Flot.js栏和行不动

1 个答案: