JS图表插件 highcharts 简单Demo

highcharts  demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>highcharts Demo</title>
</head>
<body>

    <div id="container"></div>

    <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

<script>
    $(function () {
        $(‘#container‘).highcharts({
            title: {
                text: ‘Monthly Average Temperature‘,
                x: -20 //center
            },
            subtitle: {
                text: ‘Source: WorldClimate.com‘,
                x: -20
            },
            xAxis: {
                categories: [‘Jan‘, ‘Feb‘, ‘Mar‘, ‘Apr‘, ‘May‘, ‘Jun‘,‘Jul‘, ‘Aug‘, ‘Sep‘, ‘Oct‘, ‘Nov‘, ‘Dec‘]
            },
            yAxis: {
                title: {
                    text: ‘Temperature (°C)‘
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: ‘#808080‘
                }]
            },
            tooltip: {
                valueSuffix: ‘°C‘
            },
            legend: {
                layout: ‘vertical‘,
                align: ‘right‘,
                verticalAlign: ‘middle‘,
                borderWidth: 0
            },
            series: [{
                name: ‘Tokyo‘,
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
                name: ‘New York‘,
                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]
            }, {
                name: ‘Berlin‘,
                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: ‘London‘,
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
        });
    });
</script>

</body>
</html>
时间: 2024-07-29 15:02:30

JS图表插件 highcharts 简单Demo的相关文章

Highcharts图表插件的简单使用说明

Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表. Highcharts是一个非常流行,界面美观的纯Javascript图表库.它主要包括两个部分:Highcharts和Highstock.  Highcharts可以为您的网站或Web应用程序提供直观,互动式的图表.目前支持线,样条,面积,areaspline,柱形图,条形图,饼图和散点图类型.  H

【jQuery】兼容IE6的图表插件Highcharts

在网页中有时候需要画出统计图,尤其是一些OA系统中,这样能够给各位看官一个直观的数据显示.图表用很多东西都能画出来,比如JSP可以利用JAVA本身就有的绘图函数,php有jpgraph插件,具体请看<[php]使用jpgraph完成投票系统的普通用户部分>(点击打开链接),等等,但毕竟属于现实层的内容,还是用前端插件更好一点.网上的JavaScript/jQuery图标插件到处东西,但是试过JS charts还是觉得Highcharts图表插件最好.因为它兼容IE6.其它不兼容IE6的东西太先

js图表插件

1. Flotr2 Flotr2 是个独立框架库,支持HTML5图表和图形.它是 flotr 的一个分支版本,移除了 Prototype 依赖性,并且有很多改进.支持:线图.条图.蜡状图.饼图.气泡图.诸如 IE6 类的老浏览器也支持. 2. Rickshaw Rickshaw 是个用于创建交互式时序图的JS工具.它依赖 D3 可视化库和其他一些 jQuery 和 jQuery UI 的插件. 3. D3 D3 是一款著名且高效的可视化库. 4. Awesome Chart JS Awesome

Vis.js图表插件

Vis.js是一款基于JavaScript的可视化图表库,Vis.js不像其他的图表库那样仅仅支持几种常用的数据图表,比如线形图.柱状图.饼图等,Vis.js支持上百种不同类型的可视化图表类型,比如时间线图.网络图.2D图表.3D图表,每一种类型的图表下又包含几十种不同展现方式的数据图表. 更为让人震撼的是,Vis.js图表都是动态的,也就是说你可以拖动每一个数据节点来让图表数据进行动态排列. Vis.js时间线图的效果图 Vis.js网络图效果图: Vis.js 2D图表效果图: Vis.js

图表插件——Highcharts插件的使用(一柱状图)

1.下载Highcharts插件 官方下载网址:http://www.highcharts.com/download 2.引入需要的js文件 <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/Highcharts-4.2.5/js/highcharts.js"></script> 3.创建div容器 <div

图表插件--jqplot简单示例及参数说明

最简陋的线形图 第一步:引入必要的CSS.JS文件 [html] view plaincopy <link rel="stylesheet" type="text/css" href="js/jqPlot/1.0.4/jquery.jqplot.min.css"/> <!-- excanvas.js用于兼容IE浏览器 --> <!--[if lt IE 9]><script language="

一个朋友js图表开发遇到的问题 解决思路c和js

引言            不求知道一切, 只求发现一件 -- 乔治·西蒙·欧姆 附注:那些存在于梦幻中的事迹,那些儿时梦中的人物,每每看起,都觉得 .哎 .... 岁月 ... 一直在努力 ... 哎 ...... 愿有 同感受的经历的人  , 今天过的更舒适. 题外话 一个朋友有一次,前不久给我发了一封邮件 介绍 他在写一个js图表插件的自适应代码. 希望我能帮他从 中 找出自适应的数学规律. 他给我的信息 如下: 内容 : 这就是一道数学题,其实我还是觉得挺好玩的,就是老虎吃刺猬,不知道从

Atitit.js图表控件总结

1. 为什么要使用图表1 2. 图表分类1 3. 数据可视化的优点1 4. 流行的js图表类库1 5. 参考2 1. 为什么要使用图表 因为要可视化 2. 图表分类 条形图.柱状图.折线图和饼图是图表中四种最常用的基本类型 分类 条形图.柱状图.折线图和饼图是图表中四种最常用的基本类型 3. 数据可视化的优点 最主要优点是直观啊 就像庄子的40个典故一样的直观啊 作者::  ★(attilax)>>>   绰号:老哇的爪子 ( 全名::Attilax Akbar Al Rapanui 阿

highcharts 图表库的简单使用

Highcharts简介: Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图.柱状图.饼图.散点图等多达18种不同类型的图表,可以满足你对Web图表的任何需求 ! 兼容性 Highcharts支持目前所有的现代浏览器,包括IE6 +.iPhone/iPad.Android.Highcharts在标准(W3C标准)浏览器中使用SVG技术渲染图形,在遗留的IE浏览器中使用VML