highchart 动态生成x轴和折线图

<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <style>

            /* css 代码  */

        </style>

        <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>

        <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>

        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

    </head>

    <body>

        <div id="container" style="min-width:400px;height:400px"></div>

        <script>

        var chart = new Highcharts.Chart('container', {

            title: {

                text: '不同城市的月平均气温',

                x: -20

            },

            subtitle: {

                text: '数据来源: WorldClimate.com',

                x: -20

            },

            xAxis: {

                categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']

            },

            yAxis: {

                title: {

                    text: '温度 (°C)'

                },

                plotLines: [{

                    value: 0,

                    width: 1,

                    color: '#808080'

                }]

            },

            tooltip: {

                valueSuffix: '°C'

            },

            legend: {

                layout: 'vertical',

                align: 'right',

                verticalAlign: 'middle',

                borderWidth: 0

            },

            series: []

        });

        chart.xAxis[0].categories = ['1月', '2月', '3月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];

        var series = chart.addSeries({

               name: '纽约',

                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]

          }, true);

        var series = chart.addSeries({

               name: '纽约2',

                data: [-0.3, 0.89, 6.7, 21.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 9.6, 12.5]

          }, true);

        </script>

    </body>

</html>

参考:

[已解决] HighStock如何动态添加数据组
https://bbs.hcharts.cn/thread-43-1-1.html

highcharts 动态生成x轴和折线图的更多相关文章

  1. HighCharts之2D带Label的折线图

    HighCharts之2D带Label的折线图 1.HighCharts之2D带Label的折线图源码 LineLabel.html: <!DOCTYPE html> <html&g ...

  2. Echarts使用及动态加载图表数据 折线图X轴数据动态加载

    Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯JavaScript的图表库,来自百度...我想应该够简洁了 使用Echarts 目前,就官网的文 ...

  3. Echarts动态加载柱状图和折线图混合展示的实例

    一.引入echarts文件: <script type="text/javascript" src="echarts.js"></script ...

  4. HighCharts实现多数据折线图分列显示

    HighCharts实现多数据折线图分列显示 BY ZYZ HighCharts是一个很好用的web端绘图插件,用起来很方便,它的官方支持很好.并且有中文API(不全然).画出来的图像也挺美丽的. 近 ...

  5. ECharts使用—折线图动态加载

    最近需求中用到折线图,单线条,多线交错,之前是散点图,用的是另一个 amcharts.js,这个文档也能找的到,回归早本次重点:ECharts 一.首先引入echarts.common.min.js文 ...

  6. 利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全)

    利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全) 14.4 利用JFreeChart生成折线图 通过JFreeChart插件,既可以生成普通效果的折线图,也可以生成3D效果的折 ...

  7. Highcharts动态赋值学习

    最近老大让做项目中的统计图表功能,需要使用highcharts这个插件,弄出来了两种类型的图表动态赋值的实现,首先贴上中文网的官网和api地址,使用这个英语不好的同学肯定会用到的: 中文网官网:htt ...

  8. 又快又好！巧用ChartJS打造你的实用折线图

    又快又好!巧用ChartJS打造你的实用折线图 最终效果 本示例利用官方示例改造而成,生成带图示的折线图,标出各折线的名称,可以筛选想要显示的折线. 要实现最终效果,我们要分三步走: 生成折线图: 生 ...

  9. echarts 拼图和折线图的封装 及常规处理

    1.html <div id="wrap"></div> 2.js ; (function ($) { $.fn.extend({ echartsPie: ...

随机推荐

  1. android 上线流程

    1.首先打开安卓市场官网,在右上角找到注册按钮,先注册成为开发者. 2.而后点击“开发者”进入“开发者中心”页面(也可从网页下方的“开发者入口”进入). 3.选择“发布软件”选项,依次上传创建的APP ...

  2. sqlserver ssms ctrl+e快捷键问题

    大部分的环境 win2008R2+sqlserver2014R2  ssms 中 ctrl+e都是可以执行查询的,某些情况下,ctrl+e是个组合键 ctrl+e已按下,正在等待按下第二个键 调整方法 ...

  3. Unix 网络编程 读书笔记3

    第四章 基本tcp 套接口编程 注意区分AF_XXX 和PF_XXX,AF代表address family, PF代表protocol family. 1 socket 函数 2 connect 函数 ...

  4. 实现锁死的有滚动条的div的表格(datagird)

    JS框架使用Jquery 最终效果: 代码结构: 代码: <HEAD><TITLE>new document</TITLE> <META name=Gener ...

  5. hdoj 2199 Can you solve this equation? 【二分枚举】

    题意:给出一个数让你求出等于这个数的x 策略:如题. 由于整个式子是单调递增的.所以能够用二分. 要注意到精度. 代码: #include <stdio.h> #include <s ...

  6. php调试利器Xhprof的安装与使用

    一.安装xhprof wget http://pecl.php.net/get/xhprof-0.9.4.tgz tar -zxvf xhprof-0.9.4.tgz cd xhprof-0.9.4/ ...

  7. inet_ntoa 的一个小问题

    一个简单点的阻塞式tcp服务器如下所示: #include <stdio.h> #include <string.h> #include <sys/socket.h> ...

  8. [转]网易云音乐Android版使用的开源组件

    原文链接 网易云音乐Android版从第一版使用到现在,全新的 Material Design 界面,更加清新.简洁.同样也是音乐播放器开发者,我们确实需要思考,相同的功能,会如何选择.感谢开源,让我 ...

  9. oracle11g本地可以访问但局域网无法访问

    问题描述,现在有两台电脑 A 和 B : 1)电脑 A 上有 Oracle11G服务端: ip地址 192.168.1.198; 端口1521: 2)电脑 A 本机连接数据库正常,可以登录及操作等: ...

  10. PL SQL基本内容(原创)

    本节介绍PL SQL的基本内容 本节所举示例数据来源oracle用户scott下的emp表和dept表,数据如下: 一.plsql简介: 1.概念:procedural language,过程化sql ...