如何使用highchart制作月和日工具提示?

时间:2018-06-22 05:45:01

标签: javascript jquery html highcharts

enter image description here

我正在尝试使用highchart查找“月和日”工具提示看起来像图像,是否可以使用highchart来使此工具提示成为可能?

我尝试使用jQuery使其实现,但无法按要求工作。

  $(document).ready(function () {
            var d = new Date(),
                dateAdd = 0;
                
            $(".right").click(function () {
                dateAdd += 1;
                DateMarquee(dateAdd);
            });
            $(".left").click(function () {
                dateAdd -= 1;

                DateMarquee(dateAdd);
            });
            const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
                "July", "Aug", "Sep", "Oct", "Nov", "Dec"];
                DateMarquee(dateAdd);
            function DateMarquee(dateAdd) {
                var dayOne = (d.getDate() + dateAdd),
                    dayTwo = (d.getDate() + dateAdd + 1),
                    dayThree = (d.getDate() + dateAdd + 2),
                    dayFour = (d.getDate() + dateAdd + 3),
                    dayFive = (d.getDate() + dateAdd + 4),
                    daySix = (d.getDate() + dateAdd + 5),
                    daySeven = (d.getDate() + dateAdd + 6),
                    m = d.getMonth()+dateAdd;
                $(".dayOne").text(monthNames[m] + dayOne);
                $(".dayTwo").text(monthNames[m] + dayTwo);
                $(".dayThree").text(monthNames[m] + dayThree);
                $(".dayFive").text(monthNames[m] + dayFour);
                $(".daySix").text(monthNames[m] + dayFive);
                $(".daySeven").text(monthNames[m] + daySix);
                $(".dayFour").text(monthNames[m] + daySeven);
            }
        });
 i {
            border: solid black;
            border-width: 0 3px 3px 0;
            display: inline-block;
            padding: 3px;
        }

        .right {
            cursor: pointer;
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
        }

        .left {
            cursor: pointer;
            transform: rotate(135deg);
            -webkit-transform: rotate(135deg);
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
        <i class="left"></i>
        <span class="dayOne"></span>
        <span class="dayTwo"></span>
        <span class="dayThree"></span>
        <span class="dayFour"></span>
        <span class="dayFive"></span>
        <span class="daySix"></span>
        <span class="daySeven"></span>
        <i class="right"></i>
    </div>

是否可以使用highchart使其成为可能,而我必须使用javascript来实现它?

0 个答案:

没有答案