使用highcharts动态绘制折线图——so easy

Highcharts 2017-07-28

之前学习highcharts发现网上的教程大部分是对highcharts数据的注释,如何动态绘制数据大部分一笔带过,让那些初涉开发的小白云里雾里,所以我就写了一篇这样的博客。

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>测试</title>
        <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
        <script src="js/highcharts.js"></script>
        <script src="js/exporting.js"></script>
        <script>
            var chart; 
$(function() { 
     var url="test.php";// 后台路径
                var std=document.getElementById('std').value;
                var end=document.getElementById('end').value;
                var day="";
                var beij="";
                var  guangz="";
                $.ajax({
              type: "POST",
              url: url,
             async:false,// 异步发送数据,默认是true,如果不加可能会出错
              data: {"std":std,"end":end},
              success: function(data){
                                var dat=JSON.parse(data);
                                day=dat.day;
                                beij=dat.beij;
                                guangz=dat.guangz;
                               
              }
          });
    $('#container').highcharts({ 
        chart: { 
            renderTo: 'chart_line', //图表放置的容器,DIV 
            defaultSeriesType: 'line', //图表类型line(折线图), 
            zoomType: 'x'   //x轴方向可以缩放 
        }, 
        credits: { 
            enabled: false   //右下角不显示LOGO 
        }, 
        title: { 
            text: '主要城市月平均气温' //图表标题 
        }, 
        subtitle: { 
            text: '2011年'  //副标题 
        }, 
        xAxis: {  //x轴 
            categories: day, //x轴标签名称 
            gridLineWidth: 1, //设置网格宽度为1 
            lineWidth: 2,  //基线宽度 
            labels:{y:26}  //x轴标签位置:距X轴下方26像素 
        }, 
        yAxis: {  //y轴 
            title: {text: '平均气温(°C)'}, //标题 
            lineWidth: 2 //基线宽度 
        }, 
        plotOptions:{ //设置数据点 
            line:{ 
                dataLabels:{ 
                    enabled:true  //在数据点上显示对应的数据值 
                }, 
                enableMouseTracking: false //取消鼠标滑向触发提示框 
            } 
        }, 
        legend: {  //图例 
            layout: 'horizontal',  //图例显示的样式:水平(horizontal)/垂直(vertical) 
            backgroundColor: '#ffc', //图例背景色 
            align: 'left',  //图例水平对齐方式 
            verticalAlign: 'top',  //图例垂直对齐方式 
            x: 100,  //相对X位移 
            y: 70,   //相对Y位移 
            floating: true, //设置可浮动 
            shadow: true  //设置阴影 
        }, 
        exporting: { 
            enabled: false  //设置导出按钮不可用 
        }, 
        series: [{  //数据列 
            name: '北京', 
            data: beij 
        }, 
        { 
            name: '广州', 
            data: guangz
        }] 
    }); 
});
        </script>
    </head>
    <form action="#" method="post">
        <span id="sp2">
                开始时间:<input type="text" name="startDay" id="std"/>
                结束时间:<input type="text" name="endDay" id="end"/> 
                </span>
                <input type="submit" value="查询" name="chaxun"/>
</form>
    <div id="container" style="min-width: 310px; height: 400px;"></div>
</html>

在后台的代码我就不贴了,无非就是判断一下起始时间和结束时间是否为空,如果不为空就从数据库中查出来,使用将数据转化成json数据发到前端。

参考博客地址:http://www.helloweba.com/view-blog-157.html


本文由 admin 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

21 条评论

  1. yjesocqscv
    yjesocqscv

    使用highcharts动态绘制折线图——so easy - 青花瓷
    ayjesocqscv
    [url=http://www.gfd963o9iw54t5szd8g73j54fu03t70ts.org/]uyjesocqscv[/url]
    yjesocqscv http://www.gfd963o9iw54t5szd8g73j54fu03t70ts.org/

  2. mlojdlzkbo
    mlojdlzkbo

    使用highcharts动态绘制折线图——so easy - 青花瓷
    amlojdlzkbo
    mlojdlzkbo http://www.g018tnmo22pvuv26f4kpa1q87e40d243s.org/
    [url=http://www.g018tnmo22pvuv26f4kpa1q87e40d243s.org/]umlojdlzkbo[/url]

  3. mopynfhnvf
    mopynfhnvf

    使用highcharts动态绘制折线图——so easy - 青花瓷
    [url=http://www.g2860hy9gc35ba12ou82sfy053s7pmd1s.org/]umopynfhnvf[/url]
    mopynfhnvf http://www.g2860hy9gc35ba12ou82sfy053s7pmd1s.org/
    amopynfhnvf

  4. pilyhwmfy
    pilyhwmfy

    使用highcharts动态绘制折线图——so easy - 青花瓷
    apilyhwmfy
    [url=http://www.g6plo3oz6hhw65183k02dt562b5w1ry3s.org/]upilyhwmfy[/url]
    pilyhwmfy http://www.g6plo3oz6hhw65183k02dt562b5w1ry3s.org/

  5. adidas eqt support
    adidas eqt support

    I precisely needed to thank you so much yet again. I'm not certain the things I might have carried out without those information discussed by you about such a concern. It previously was the frustrating dilemma for me personally, but being able to view your professional form you solved it took me to leap over contentment. Now i'm thankful for this guidance and then wish you are aware of a great job you have been undertaking training people with the aid of your site. Probably you've never met any of us.

  6. nike cortez men
    nike cortez men

    My wife and i have been joyful that Jordan could complete his researching out of the ideas he was given when using the blog. It is now and again perplexing to simply continually be giving away tips and hints that some people might have been selling. And we also grasp we now have the blog owner to be grateful to for that. These explanations you made, the straightforward blog menu, the relationships your site make it possible to engender - it's got everything superb, and it is assisting our son in addition to our family believe that this topic is exciting, which is exceptionally pressing. Thank you for all!

  7. yeezy boost 350 v2
    yeezy boost 350 v2

    I want to point out my appreciation for your kind-heartedness supporting people that must have assistance with the study. Your real dedication to getting the message across ended up being especially insightful and have without exception allowed some individuals much like me to get to their aims. Your insightful guidelines denotes so much to me and extremely more to my office workers. Regards; from everyone of us.

  8. yeezy boost 350 v2
    yeezy boost 350 v2

    I want to express some thanks to the writer for bailing me out of this type of setting. After surfing around throughout the the web and seeing tricks which are not powerful, I thought my life was over. Living minus the solutions to the difficulties you have solved through your good article is a serious case, and ones which may have in a wrong way damaged my entire career if I hadn't discovered your website. Your own know-how and kindness in touching all the things was priceless. I am not sure what I would have done if I hadn't come across such a point like this. I'm able to at this time look forward to my future. Thanks for your time very much for this skilled and sensible guide. I won't be reluctant to refer your web page to anyone who should receive guide on this situation.

  9. golden goose outlet
    golden goose outlet

    I simply wished to say thanks again. I do not know the things that I would have used in the absence of these thoughts documented by you directly on such a theme. Previously it was a very horrifying setting in my circumstances, but considering the very specialised mode you handled that took me to leap with joy. I am just happy for this service and even have high hopes you really know what an amazing job you were carrying out educating other individuals by way of your websites. I know that you have never encountered all of us.

  10. balenciaga
    balenciaga

    I'm just writing to let you be aware of of the incredible experience our girl developed reading through your blog. She came to find several details, not to mention how it is like to possess an ideal coaching spirit to make many others without problems fully understand several very confusing subject areas. You truly exceeded our expected results. Many thanks for displaying the invaluable, trustworthy, explanatory not to mention cool tips about this topic to Tanya.

  11. adidas nmd
    adidas nmd

    I not to mention my friends were found to be digesting the nice information and facts from the website while the sudden I got an awful feeling I had not expressed respect to the web site owner for them. The women are already certainly passionate to read through them and have now truly been using those things. We appreciate you indeed being really considerate and also for making a choice on such superior guides most people are really needing to know about. My very own honest regret for not expressing appreciation to earlier.

  12. adidas nmd
    adidas nmd

    I intended to put you this tiny word so as to give thanks once again over the beautiful opinions you've discussed at this time. This is certainly tremendously generous with people like you to give easily what a number of people would have distributed for an e-book to help make some cash on their own, most importantly given that you could possibly have tried it if you considered necessary. Those solutions in addition worked to become good way to recognize that other people online have the same keenness really like my very own to grasp more and more in terms of this issue. I'm sure there are some more enjoyable periods ahead for those who scan through your blog.

  13. golden goose
    golden goose

    I as well as my buddies ended up checking the best helpful tips from the website while the sudden I had a horrible suspicion I had not expressed respect to the blog owner for them. These young boys had been so happy to learn them and have now really been enjoying them. Appreciate your turning out to be simply thoughtful and also for figuring out this kind of terrific areas most people are really wanting to discover. My honest regret for not saying thanks to earlier.

  14. louboutin shoes
    louboutin shoes

    I must express my love for your kind-heartedness in support of persons that should have assistance with this particular matter. Your real dedication to passing the solution all through has been quite productive and has usually helped guys and women just like me to arrive at their aims. Your personal warm and friendly publication implies much to me and somewhat more to my fellow workers. Many thanks; from all of us.

  15. russell westbrook shoes
    russell westbrook shoes

    I must express some appreciation to this writer just for bailing me out of this type of situation. As a result of surfing around throughout the search engines and finding things which are not powerful, I thought my entire life was well over. Existing devoid of the strategies to the problems you have resolved as a result of your good guide is a crucial case, and the kind that would have in a negative way affected my career if I hadn't noticed the website. Your own expertise and kindness in taking care of everything was very helpful. I am not sure what I would've done if I had not come across such a point like this. I'm able to at this moment look forward to my future. Thanks for your time very much for this professional and sensible guide. I will not be reluctant to propose your web site to anyone who would need assistance about this problem.

  16. yeezy boost 350 v2
    yeezy boost 350 v2

    I must show my gratitude for your kindness in support of men and women that absolutely need help with in this theme. Your special dedication to getting the message along came to be really interesting and have consistently enabled associates just like me to achieve their objectives. Your own insightful recommendations implies a whole lot a person like me and further more to my fellow workers. Best wishes; from each one of us.

  17. adidas nmd runner
    adidas nmd runner

    I wanted to put you one tiny remark to be able to thank you over again for these pleasing information you've shared in this article. It was surprisingly open-handed of you to present openly just what numerous people could possibly have supplied as an e book in order to make some profit on their own, mostly since you could have tried it if you desired. These basics in addition acted to be a great way to fully grasp other people have the same zeal similar to my very own to know whole lot more with respect to this issue. I'm certain there are thousands of more fun sessions ahead for people who browse through your site.

  18. nike basketball shoes
    nike basketball shoes

    I have to express appreciation to this writer for bailing me out of this type of condition. As a result of searching throughout the the web and meeting proposals which were not beneficial, I figured my life was over. Living minus the solutions to the issues you've resolved all through your guide is a serious case, and those which might have badly affected my entire career if I hadn't encountered your site. Your main talents and kindness in playing with every part was important. I don't know what I would've done if I had not come upon such a point like this. I can at this moment relish my future. Thanks a lot so much for this reliable and effective help. I won't think twice to endorse your site to anybody who would need tips on this problem.

  19. yeezy boost
    yeezy boost

    I intended to create you a bit of word to be able to say thanks the moment again for the pleasing concepts you have discussed on this website. It's certainly surprisingly open-handed with people like you to provide without restraint all that many people could have offered as an e book in order to make some cash on their own, primarily given that you could possibly have tried it in case you wanted. Those concepts in addition acted like a easy way to be aware that the rest have similar passion just as mine to grasp great deal more on the subject of this condition. I know there are thousands of more pleasurable opportunities ahead for folks who look over your blog post.

  20. adidas yeezy
    adidas yeezy

    Thank you for all your valuable effort on this site. My mother enjoys carrying out investigations and it is easy to see why. A lot of people hear all regarding the lively mode you deliver very helpful things through your web blog and as well as encourage contribution from other ones about this matter so our favorite daughter is actually learning so much. Enjoy the rest of the new year. Your doing a fantastic job.

  21. yeezy boost 350 v2
    yeezy boost 350 v2

    I needed to create you the bit of remark so as to give thanks as before with your marvelous methods you've documented on this website. It's quite wonderfully open-handed with people like you to grant unhampered exactly what most of us would have distributed as an electronic book to help with making some cash on their own, primarily given that you might well have tried it in case you desired. These points also worked to become a great way to be sure that other people online have a similar zeal really like my own to know the truth many more with reference to this issue. I think there are numerous more fun situations up front for those who read through your blog.

添加新评论