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. js立即执行函数应用--事件绑定

    js中立即执行函数的应用:应用到事件绑定上. 少说多做,直接运行代码(代码中有注释): <!DOCTYPE html> <html lang="zh"> & ...

  2. SPOJ 74. Divisor Summation 分解数字的因子

    本题有两个难点: 1 大量的数据输入.没处理好就超时 - 这里使用buffer解决 2 因子分解的算法 a)暴力法超时 b)使用sieve(筛子),只是当中的算法逻辑也挺不easy搞对的. 数值N因子 ...

  3. nexus 离线更新索引

    1.到http://repo.maven.apache.org/maven2/.index/页面下载下面这两个文件: nexus-maven-repository-index.gz nexus-mav ...

  4. Openerp 7.0 附件存储位置

    我们知道对OpenERP中的每个内部对象(比如:业务伙伴,采购订单,销售订单,发货单,等等)我们都可以添加任意的附件,如图片,文档,视频等.那么这些附件在OpenERP内部是如何管理的呢? 默认情况下 ...

  5. 继承Spring AbstractRoutingDataSource实现路由切换

    继承Spring AbstractRoutingDataSource实现路由切换 原创 2016年05月11日 16:50:08 标签: mybatis / AbstractRoutingDataS  ...

  6. HDUOJ-----3591The trouble of Xiaoqian

    The trouble of Xiaoqian Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/ ...

  7. &&和;和||符号的意思

    http://www.cnblogs.com/xuxm2007/archive/2011/01/16/1936836.html在命令行可以一次执行多个命令,有以下几种:   1.每个命令之间用;隔开 ...

  8. 方法$.data()和$.('#test').on()的使用

    1.on() 方法的使用 在选择元素上绑定一个或多个事件的事件处理函数. on()方法绑定事件处理程序到当前选定的jQuery对象中的元素.在jQuery 1.7中,.on()方法 提供绑定事件处理程 ...

  9. iOS - App 间的通信方式

    1.前言 iOS 系统是相对封闭的系统,App 各自在各自的沙盒(sandbox)中运行,每个 App 都只能读取 iPhone 上 iOS 系统为该应用程序程序创建的文件夹 AppData 下的内容 ...

  10. 步入DevExpress的使用（VS）

    1.下载安装DevExpress控件(如DXperienceUniversal-11.1.12.exe),安装后路径:“C:\Program Files (x86)\DevExpress 2011.1 ...