Jquery Flot图表调整大小：如果小屏幕，则将小时刻度00:00替换为0

Question

我正在使用jquery.flot和jquery.flot.resize图表插件。
我的图表如下所示：

哪个好。但问题是当我调整窗口大小时。

目前，当我调整窗口大小或从手机访问网站时，图表如下所示：

从上面可以看出，小时刻度不可读和重叠。

以下是图表的外观：

如果图表大小为375x667，那么：

1. 小时刻度应为0,2,4而不是00：00,02：00， 04:00 .....
   
2. 小时刻度应该每两小时才出现一次 （每隔2个小节）。

这是我的代码：

$(function () {
        var jsondatahour = [{"label": "00:00", "count": "537", "mins": 5860, "customerid": "0"}, {"label": "01:00", "count": "471", "mins": 3045, "customerid": "1"}, {"label": "02:00", "count": "561", "mins": 4553, "customerid": "2"}, {"label": "03:00", "count": "300", "mins": 1483, "customerid": "3"}, {"label": "04:00", "count": "362", "mins": 2128, "customerid": "4"}, {"label": "05:00", "count": "354", "mins": 1926, "customerid": "5"}, {"label": "06:00", "count": "420", "mins": 2248, "customerid": "6"}, {"label": "07:00", "count": "426", "mins": 1863, "customerid": "7"}, {"label": "08:00", "count": "864", "mins": 4392, "customerid": "8"}, {"label": "09:00", "count": "428", "mins": 1444, "customerid": "9"}, {"label": "10:00", "count": "0", "mins": 0, "customerid": "10"}, {"label": "11:00", "count": "0", "mins": 0, "customerid": "11"}, {"label": "12:00", "count": "0", "mins": 0, "customerid": "12"}, {"label": "13:00", "count": "0", "mins": 0, "customerid": "13"}, {"label": "14:00", "count": "0", "mins": 0, "customerid": "14"}, {"label": "15:00", "count": "0", "mins": 0, "customerid": "15"}, {"label": "16:00", "count": "0", "mins": 0, "customerid": "16"}, {"label": "17:00", "count": "0", "mins": 0, "customerid": "17"}, {"label": "18:00", "count": "0", "mins": 0, "customerid": "18"}, {"label": "19:00", "count": "0", "mins": 0, "customerid": "19"}, {"label": "20:00", "count": "0", "mins": 0, "customerid": "20"}, {"label": "21:00", "count": "0", "mins": 0, "customerid": "21"}, {"label": "22:00", "count": "0", "mins": 0, "customerid": "22"}, {"label": "23:00", "count": "0", "mins": 0, "customerid": "23"}];
        var hourscountdata = new Array();
        var hoursticksdata = new Array();

        for (var i = 0, j = jsondatahour.length; i < j; i++) {
            hoursticksdata.push([i, jsondatahour[i]['label']]);
            hourscountdata.push([i, jsondatahour[i]['count']]);
        }

        var data = [
            {
                data: hourscountdata,
                color: '#63FF20',
                label: 'Calls',
                bars: {show: true, align: 'center', barWidth: 0.5}
            }
        ];

        $.plot($("#bar-chart"), data, {xaxis: {ticks: hoursticksdata}, grid: {hoverable: true}});

        $('#bar-chart').resize(function () {
            console.log("bar-chart is now "
                + $(this).width() + "x" + $(this).height()
                + " pixels");   // outputs: bar-chart is now 375x667 pixels
        });
    });

Answer 1

你应该探索插件jquery.flot.time.js而不是使用字符串来定义x轴的时间。但如果你真的想要保留字符串，这是一个简单的代码来解决你的问题。

<!-- <div id="bar-chart"  style="width: 900px; height: 200px;"></div> -->
    <div id="bar-chart"  style="width: 300px; height: 200px;"></div>
        <script type="text/javascript">
        //<![CDATA[
        function isOdd(n){
           return parseFloat(n) && (Math.abs(n) % 2 == 1);
        }


        //From "HH:MM" to number(h)
        function getHourValue(time){
            return parseInt(time.substring(0, 2));
        }

        function getDivWidth(){
            return  document.getElementById('bar-chart').offsetWidth;
        }




        $(function () {
             var jsondatahour = [{"label": "00:00", "count": "537", "mins": 5860, "customerid": "0"}, {"label": "01:00", "count": "471", "mins": 3045, "customerid": "1"}, {"label": "02:00", "count": "561", "mins": 4553, "customerid": "2"}, {"label": "03:00", "count": "300", "mins": 1483, "customerid": "3"}, {"label": "04:00", "count": "362", "mins": 2128, "customerid": "4"}, {"label": "05:00", "count": "354", "mins": 1926, "customerid": "5"}, {"label": "06:00", "count": "420", "mins": 2248, "customerid": "6"}, {"label": "07:00", "count": "426", "mins": 1863, "customerid": "7"}, {"label": "08:00", "count": "864", "mins": 4392, "customerid": "8"}, {"label": "09:00", "count": "428", "mins": 1444, "customerid": "9"}, {"label": "10:00", "count": "0", "mins": 0, "customerid": "10"}, {"label": "11:00", "count": "0", "mins": 0, "customerid": "11"}, {"label": "12:00", "count": "0", "mins": 0, "customerid": "12"}, {"label": "13:00", "count": "0", "mins": 0, "customerid": "13"}, {"label": "14:00", "count": "0", "mins": 0, "customerid": "14"}, {"label": "15:00", "count": "0", "mins": 0, "customerid": "15"}, {"label": "16:00", "count": "0", "mins": 0, "customerid": "16"}, {"label": "17:00", "count": "0", "mins": 0, "customerid": "17"}, {"label": "18:00", "count": "0", "mins": 0, "customerid": "18"}, {"label": "19:00", "count": "0", "mins": 0, "customerid": "19"}, {"label": "20:00", "count": "0", "mins": 0, "customerid": "20"}, {"label": "21:00", "count": "0", "mins": 0, "customerid": "21"}, {"label": "22:00", "count": "0", "mins": 0, "customerid": "22"}, {"label": "23:00", "count": "0", "mins": 0, "customerid": "23"}];
                var hourscountdata = new Array();
                var hoursticksdata = new Array();
                var j=jsondatahour.length;
                var threshold2Resize = 667;

                ;
                for (var i=0; i<j;i++) {
                    if(getDivWidth()<threshold2Resize){
                         if(isOdd(i)){
                                hourscountdata.push([i, jsondatahour[i]['count']]);
                            }
                            else{
                                hoursticksdata.push([i, getHourValue(jsondatahour[i]['label']) ]);
                                hourscountdata.push([i, jsondatahour[i]['count']]);
                            }
                    }
                    else{
                        hoursticksdata.push([i, jsondatahour[i]['label']]);
                        hourscountdata.push([i, jsondatahour[i]['count']]);
                    }
                }

                var data = [
                    {
                        data: hourscountdata,
                        color: '#63FF20',
                        label: 'Calls',
                        bars: {show: true, align: 'center', barWidth: 0.5}
                    }
                ];

                $.plot($("#bar-chart"), data, {xaxis: {ticks: hoursticksdata}, grid: {hoverable: true}});

                $('#bar-chart').resize(function () {
                    console.log("bar-chart is now "
                        + $(this).width() + "x" + $(this).height()
                        + " pixels");   // outputs: bar-chart is now 375x667 pixels
                });
            });
        //]]>
    </script>