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. OA项目实战学习（7）——初始化数据&amp;权限配置显示

    详细有哪些功能: 初始化数据 权限数据. 超级管理员. Installer.java package cn.xbmu.oa.install; import javax.annotation.Resou ...

  2. 安装 Flex2packagebeta_1.994

    下载文件 解压到/var/root/Media/Cydia/AutoInstall/这个路径重启手机,Cydia会自动安装好DEB文件的 patch路径 下载 /private/var/mobile/ ...

  3. C10K——千万级并发实现的秘密：内核不是解决方案，而是问题所在！（转）

    既然我们已经解决了 C10K并发连接问题,应该如何提高水平支持千万级并发连接?你可能会说不可能.不,现在系统已经在用你可能不熟悉甚至激进的方式支持千万级别的并发连接. 要知道它是如何做到的,我们首先要 ...

  4. iOS仿支付宝芝麻信用仪表盘效果

    概述 自定义View之高仿支付宝芝麻信用分数仪表盘动画效果 详细 代码下载:http://www.demodashi.com/demo/10654.html 仿支付宝芝麻信用仪表盘效果 一.主要思路 ...

  5. Androidmanifest.xml在Android项目中的作用

    以下是一个项目中的AndroidManifest.xml文件: <?xml version="1.0" encoding="utf-8"?> < ...

  6. 通过配置CPU参数 worker_cpu_affinity 提升nginx性能

    简介 Nginx默认没有开启利用多核cpu,我们可以通过增加worker_cpu_affinity配置参数来充分利用多核cpu的性能.cpu是任务处理,计算最关键的资源,cpu核越多,性能就越好. 规 ...

  7. function声明的深刻含义和jquery属性注入区别

    在js中有两类对象 1.json对象,仅仅代表对象而已 2.function声明的对象 (1) 它定义了构造器  可以用new 对象 来初始化 数据对象 (2) 它指明对象是一个函数对象  通过后面加 ...

  8. 配置Eclipse 3.3 + tomcat 6.0 + lomboz 3.3进行Web开发

    http://www.cnblogs.com/xtsong/articles/1203155.html我以前编程用的都是Eclipse 3.2,这次跑到www.eclipse.org上去溜达了一番,发 ...

  9. js unique

    <script type="text/javascript"> var dataArr = [1,3,33,3,5,1,4,3,4,5]; document.write ...

  10. 12个JavaScript技巧【转】

    使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用 ...