1. 程式人生 > >Highcharts入門小示例

Highcharts入門小示例

一、建立條形圖

  1、建立div容器

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

  2、編寫圖表配置程式碼

  相關示例:

 <html>

<head>

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

      <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
      <script>
        $(function () { 
            $('#container').highcharts({
                chart: {
                    type: 'column'
              },
              title: {
                  text: 'My first Highcharts chart'
              },
              xAxis: {
                  categories: ['蘋果', '香蕉', '橙子']   //指定x軸分組
              },
              yAxis: {
                  title: {
                      text: 'something'
                  }
              },
               series: [{                                //指定資料列
                  name: '小明',                          //資料列名
                  data: [1, 0, 4]                        //資料
              }, {
                  name: '小紅',
                  data: [5, 7, 3]
              }]
          });
      });
     </script>
  </head>
  <body>
     <div id="container" style="min-width:800px;height:400px;"></div>
  </body>
 </html>
執行後的效果:
二、如何學習Highcharts

  1、準備知識

    • 熟悉Html、jQuery、Json、Ajax等前端知識
    • 至少會一種後臺語言,例如 Php、Java、Asp.net、Nodejs 等(Highcharts只是做資料展現,具體的資料來源必須通過動態語言)

  2、幾點建議

    • 學習任何東西都是從例項模仿、自己實踐中掌握的
    • 多看API,Highcharts 提供的API文件非常完善,幾乎所有的問題都可以在 API 找到解決辦法

相關推薦

Highcharts入門示例

一、建立條形圖   1、建立div容器   <div id="container" style="min-width:800px;height:400px"></div>   2、編寫圖表配置程式碼   相關示例:  <html> <head> <scri

Hibernate 入門案例

java程序 div nocache org student 包含 target .so tell 前言: 學習學到現在終於要學習框架了,心裏有點小激動呢,也不知道自己能不能學好呢,只能按著一步一個腳印的走下去,好了廢話不多說。讓我們打開hibernate

WebService概述和CXF入門程序

定義 clas zhang 目的 配置 service組件 ott code 方式 一. 什麽是WedService? WebService不是框架, 甚至不是一種技術, 而是一種跨平臺,跨語言的規範, WebService的出現是為了解決這種需求場景: 不同平臺,

C++ 入門程序

color name hello namespace world ios urn use pan 1.控制臺輸出 hello world #include "stdafx.h" #include<iostream> using namespace std;

gulp安裝+一個超簡單入門demo

hang span pac 昨天 content expr ng- arch 什麽 gulp安裝參考、gulp安裝參考2、 一、NPM npm是node.js的包管理工具。主要功能是管理、更新、搜索、公布node的包。 Gulp是通過npm安裝的。 所以首先

nginx動靜分離示例

lis span gin 其他 cati cal 分離 log root server { listen 80; server_name www.xxx.cn;          #靜態頁面     #匹配首頁,ur

Python(入門練習2)

python入門小練習 用戶密碼登錄三次鎖定 用戶密碼登錄三次鎖定案例需求1.輸入用戶名密碼 2.認證成功後顯示歡迎信息 3.輸錯三次後鎖定實現思路: 1.判斷用戶是否在黑名單,如果在黑名單提示賬號鎖定。 2.判斷用戶是否存在,如果不存在提示賬號不存在。 3.判斷賬號密碼是否正確,如果正確登

Docker基礎入門示例

操作 容器 work 我們 cor 運維 又能 不用 控制器   Docker近幾年的發展可謂一日千裏,特別從是2013年隨著一個基於LXC的高級容器引擎開源,到現在,其在linux和windows上都有了很好的支持,並且已經有很多公司將docker用於實際的生產環境部

shell腳本示例

amp logs -1 done int oot 階乘 i++ blog 求1-100自然數的和: 法一:for循環 #!/bin/bash # declare -i sum=0 for ((i=0;i<=100;i++));do let sum+=$i do

Struts2 第一個入門案例

str ges struts nbsp 配置 加載類 src 第一個 alt 1.加載類庫 2 配置web.xml文件 3.開發視圖層 4.開發控制層Action 5.配置struts.xml 6.部署運行 Struts2 第一個入門小案例

hibernate添加數據入門案例

ng- local main net domain .so 語句 info lec 1.建立一個java項目,在目錄下新建一個lib文件夾引入hibernate架包如圖所示: 2. 新建com.LHB.domain包,在包中分別創建一個Employee.java和Empl

PHP時間戳的問題幾個示例

北京時間 content date def 當前 時間戳 day 問題 獲得 <?php header("Content-type:text/html;charset=utf-8"); //設置北京時間為默認時區 date_default

java的幾個入門程序

col 成員變量 比較 oid pan 聲明 經典 名稱 沒有 1.先是最最經典的hello world! public class Hello { public static void main(String args[]) { System

Python入門程序

ear err 小程序 eat 不用 input you 第一個程序 python 1、Python2進入中文模式 #!-*- coding:utf-8 -*- 或者 #coding:utf-8 2、關於註釋:單行註釋即:#print 在之前加# 多行註釋即:開頭

python入門程序2

blog 小程序 cal else 基本 print 年齡 gpo python入門 1、猜年齡 age_of_princal=78 guess_age =int(input(">>:")) if guess_age == age_of_princal:

mybatis 不整合spring 入門例子

ole batis system [] commit print 管理 args private 先上一個搭建完的項目結構截圖: 相對比較重要的配置文件有 db.properties , SqlMappingConfig.xml , mapper/User.xm

FastDFS簡單入門demo

cti gen class serve HA AR jar包 pre bigdata 圖片上傳 需要引入 FastDFS 相關的jar包,但是這個jar沒有在中央倉庫,所以還得需要找到這個jar手動安裝到自己的本地倉庫才能使用。 需要一個配置文件 fdfs_clie

Python入門程序1

機會 條件語句 連接 python零基礎 設定 random == 循環條件 嵌套 學習了FishC的Python零基礎入門第4節,本次的內容是Python的while循環語句和條件語句。 1. 用一個條件語句實現猜數字的小程序 程序設定一個數字,用戶輸入一個數字,判斷是

Python入門程序(一)

while 條件 循環條件 次數 ima http post nba random 學習了FishC的Python零基礎入門第4節,本次的內容是Python的while循環語句和條件語句。 1. 用一個條件語句實現猜數字的小程序 程序設定一個數字,用戶輸入一個數字,判斷是

matplotlib示例

minus matplot false xlabel mat plot fig vol 顏色 matplotlib 畫廊 http://matplotlib.org/gallery.html import numpy as np import matplotlib.p