Flot.js 条和线不动

Question

我对 flot.js 很陌生。我尝试在同一张图中用一条条和一条线绘制我自己的图表。 X轴是月份（一月到十二月），左边的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

只需将您的条宽更改为 1 或更小的类似值（示例请参见此 fiddle）：

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

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

这是一个 second version of the fiddle，条形居中对齐，还有您写的折线图（您最初只有一个没有线的点图）。

Flot.js 条和线不动

Flot.js bar and line not move

javascript

jquery

graph

flot