首頁 web前端 js教程 纯JAVASCRIPT图表动画插件Highcharts Examples_jquery

纯JAVASCRIPT图表动画插件Highcharts Examples_jquery

May 16, 2016 pm 06:07 PM
highcharts 圖表

What is Highcharts? 下载地址 http://www.jb51.net/jiaoben/24363.html
Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.
Features
Compatible
It works in all modern browsers including the iPhone/iPad and Internet Explorer from version 6. Standard browsers use SVG for the graphics rendering. In Internet Explorer graphics are drawn using VML.
Free for Non-commercial
.
Pure JavaScript
Highcharts is solely based on native browser technologies and doesn't require client side plugins like Flash or Java. Furthermore you don't need to install anything on your server. No PHP or ASP.NET. Highcharts needs only two JS files to run: The highcharts.js core and either the jQuery or the MooTools framework. One of these frameworks is most likely already in use in your web page.
Numerous Chart Types
Highcharts supports line, spline, area, areaspline, column, bar, pie and scatter chart types. Any of these can be combined in one chart.
Simple Configuration Syntax
Setting the Highcharts configuration options requires no special programming skills. The options are given in a JavaScript object notation structure, which is basically a set of keys and values connected by colons, separated by commas and grouped by curly brackets.
Dynamic
Through a full API you can add, remove and modify series, axes or points at any time after chart creation. Numerous events supply hooks for programming agains the chart. In combination with jQuery's or MooTools' Ajax API, this opens for solutions like live charts constantly updating with values from the server, user supplied data and more.
Multiple Axes
Sometimes you want to compare variables that are not the same scale - for example temperature versus rainfall and air pressure. Highcharts lets you assign an y axis for each series - or an x axis if you want to compare data sets of different categories. Each axis can be placed to the right or left, top or bottom of the chart. All options can be set individually, including reversing, styling and position.
Tooltip Labels
On hovering the chart Highcharts can display a tooltip text with information on each point and series. The tooltip follows as the user moves the mouse over the graph, and great efforts have been taken to make it stick to the nearest point as well as making it easy to read a point that is below another point.
Datetime Axis
75% of all charts with an X and Y axis have a date-time X axis. Therefore Highchart is very intelligent about time values. With milliseconds axis units, Highcharts determines where to place the ticks so that they always mark the start of the month or the week, midnight and midday, the full hour etc.
Export and print
With the exporting module enabled, your users can export the chart to PNG, JPG, PDF or SVG format at the click of a button, or print the chart directly from the web page.
Zooming
By zooming in on a chart you can examine an especially interesting part of the data more closely. Zooming can be in the X or Y dimension, or both.
External Data Loading
Highcharts takes the data in a JavaScript array, which can be defined in the local configuration object, in a separate file or even on a different site. Furthermore, the data can be handled over to Highcharts in any form, and a callback function used to parse the data into an array.
Inverted Chart or Reversed Axis
Sometimes you need to flip over your chart and make the X axis appear vertical, like for example in a bar chart. Reversing the axis, with the highest values appearing closest to origo, is also supported.
Text Rotation for Labels

Do you want to use Highcharts for a personal website, a school site or a non-profit organisation? Then you don't need the author's permission, just go on and use Highcharts. For commercial websites and projects, see License and Pricing All text labels, including axis labels, data labels for the point and axis titles, can be rotated in any angle.

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何在Google Sheet中為圖例新增標籤 如何在Google Sheet中為圖例新增標籤 Feb 19, 2024 am 11:03 AM

本文將示範如何在GoogleSheet中為圖例新增標籤,這些標籤著重於單一事物,提供名稱或識別。圖例解釋了事物的系統或群組,為您提供相關的上下文資訊。如何在GoogleSheet中為圖例添加標籤有時候,在使用圖表時,我們想要讓圖表更易於理解。透過添加恰當的標籤和圖例,可以實現這一目的。接下來,我們將介紹如何在Google表格中為圖例新增標籤,讓您的資料更加清晰明了。建立圖表編輯圖例標籤的文字我們開始吧。 1]建立圖表要標記圖例,首先,我們必須建立一個圖表:首先,在GoogleSheets的列或行中輸

如何使用PHP數組實現圖表和統計圖的產生和顯示 如何使用PHP數組實現圖表和統計圖的產生和顯示 Jul 15, 2023 pm 12:24 PM

如何使用PHP數組實現圖表和統計圖的生成和顯示PHP是一種廣泛使用的伺服器端腳本語言,具有強大的資料處理和圖形生成能力。在Web開發中,經常需要展示資料的圖表和統計圖,透過PHP數組,我們可以輕鬆實現這些功能。本文將介紹如何使用PHP數組產生和顯示圖表和統計圖,並提供相關的程式碼範例。引入必要的庫文件和樣式表在開始之前,我們需要在PHP文件中引入一些必要的庫文

如何在Highcharts中使用桑基圖來展示數據 如何在Highcharts中使用桑基圖來展示數據 Dec 17, 2023 pm 04:41 PM

如何在Highcharts中使用桑基圖來展示資料桑基圖(SankeyDiagram)是一種用於視覺化流量、能源、資金等複雜流程的圖表類型。它能清楚地展示各個節點之間的關係和流動情況,可以幫助我們更好地理解和分析數據。在本文中,我們將介紹如何使用Highcharts來建立和自訂桑基圖,並附上特定的程式碼範例。首先,我們需要載入Highcharts庫和Sank

Vue統計圖表的線性、餅狀圖功能實現 Vue統計圖表的線性、餅狀圖功能實現 Aug 19, 2023 pm 06:13 PM

Vue統計圖表的線性、餅狀圖功能實現在資料分析和視覺化領域,統計圖表是一種非常常用的工具。 Vue作為一種流行的JavaScript框架,提供了方便的方法來實現各種功能,包括統計圖表的展示和互動。本文將介紹如何使用Vue來實現線性和餅狀圖功能,並提供相應的程式碼範例。線性圖功能實現線性圖是一種用於展示資料趨勢和變化的圖表類型。在Vue中,我們可以使用一些優秀的第

如何在Highcharts中使用動態數據來展示即時數據 如何在Highcharts中使用動態數據來展示即時數據 Dec 17, 2023 pm 06:57 PM

如何在Highcharts中使用動態數據來展示即時數據隨著大數據時代的到來,對於即時數據的展示變得越來越重要。 Highcharts作為一種流行的圖表庫,提供了豐富的功能和可自訂性,使得我們可以靈活地展示即時數據。本文將介紹如何在Highcharts中使用動態數據來展示即時數據,並給出特定的程式碼範例。首先,我們需要準備一個能夠提供即時數據的資料來源。在本文中,我

如何使用Highcharts建立甘特圖表 如何使用Highcharts建立甘特圖表 Dec 17, 2023 pm 07:23 PM

如何使用Highcharts建立甘特圖表,需要具體程式碼範例引言:甘特圖是一種常用於展示專案進度和時間管理的圖表形式,能夠直觀地展示任務的開始時間、結束時間和進度。 Highcharts是一款功能強大的JavaScript圖表庫,提供了豐富的圖表類型和靈活的配置選項。本文將介紹如何使用Highcharts建立甘特圖表,並給出具體的程式碼範例。一、Highchart

如何在Highcharts中使用堆疊圖表來展示數據 如何在Highcharts中使用堆疊圖表來展示數據 Dec 18, 2023 pm 05:56 PM

如何在Highcharts中使用堆疊圖表來展示資料堆疊圖表是一種常見的資料視覺化方式,它可以同時展示多個資料系列的總和,並以長條圖的形式顯示每個資料系列的貢獻。 Highcharts是一款功能強大的JavaScript庫,提供了豐富的圖表種類和靈活的配置選項,可以滿足各種資料視覺化的需求。在本文中,我們將介紹如何使用Highcharts來建立一個堆疊圖表,並提

Vue框架下,如何快速建構統計圖表系統 Vue框架下,如何快速建構統計圖表系統 Aug 21, 2023 pm 05:48 PM

在Vue框架下,如何快速建立統計圖表系統在現代網頁應用中,統計圖表是必不可少的組成部分。 Vue.js作為一個流行的前端框架,提供了許多方便的工具和元件,能夠幫助我們快速建立統計圖表系統。本文將介紹如何利用Vue框架以及一些外掛程式來建立一個簡單的統計圖表系統。首先,我們需要準備一個Vue.js的開發環境,包括安裝Vue腳手架以及一些相關的插件。在命令列中執行以下命

See all articles