Highcharts is a javascript-only chart library that allows you to easily add interactive charts to websites or web applications, currently, highcharts supports up to 18 different types of charts, such as line chart, curve chart, Area Chart, bar chart, pie chart, and scatter chart, to meet your requirements for Web charts!
The above is an introduction to highcharts Chinese online!
If the Analects of Confucius is simple, or you need to draw line, column, and pie charts with simple functions, highcharts is far inferior to JS icon library-js charts, but if complicated and diverse features are involved, highcharts has dumped JS charts. How can it end with 8 streets!
This type of JS framework is usually easy to learn. After downloading the package, you can check the example. However, highcharts is very good at this point!
See:
Highcharts Chinese Network Home: http://www.hcharts.cn/index.php
Highcharts Official Website: http://www.highcharts.com/
To learn about highcharts, you don't need to follow the examples example under the package to try it one by one (this is what I learned about JS charts! --),
You can get started with this technology in an hour through the three pages provided by the Chinese website!
Highcharts Chinese tutorial
Highcharts API documentation
Highcharts Online Demo Platform
The learning focus is on this online demo platform, which contains all the sample files in the downloaded package. And you can click this "edit code" in the middle of the page to jump to a "online test platform" place, like here http://www.hcharts.cn/test/index.php? From = demo & P = 10
The online demonstration platform is also very detailed, but many sections are still being improved...
What is the entrance to highcharts learning? It is the figure on the official website (here I will take it from the official website ):
All attributes of a chart. Clear at a glance.
Here is a simple chart example on the official website:
This example is directly generated by the following code. I briefly commented on it. The code is located under the Highlchar-4.0.3, \ Highcharts-4.0.3 \ examples \ line-labels \ index.html, open it directly.
<!DOCTYPE HTML>Highcharts Standalone Framework 中的一个框架文件。（抄自官网...）--> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script> <style type="text/css">${demo.css} </style> <script type="text/javascript">$(function () { $(‘#container‘).highcharts({ chart: { //图表总体的设置 type: ‘line‘ //这个默认为line即折线图,还可以为柱状column，不过饼状图不是这里设置，而是直接在series数据列上指定 type: ‘pie‘, }, title: { //图表标题 text: ‘Monthly Average Temperature‘ //标题名称 }, subtitle: { //副标题 text: ‘Source: WorldClimate.com‘ }, xAxis: { //x轴 categories: [‘Jan‘, ‘Feb‘, ‘Mar‘, ‘Apr‘, ‘May‘, ‘Jun‘, ‘Jul‘, ‘Aug‘, ‘Sep‘, ‘Oct‘, ‘Nov‘, ‘Dec‘] //x轴数据 }, yAxis: { //Y轴 title: { text: ‘Temperature (?C)‘ //y轴标题 } }, plotOptions: { //图表标示的各种选项 line: { //这里由于是折线图，那么就是折线图的选项 dataLabels: { //数据标签 enabled: true //允许显示数据，默认为false，不显示具体数据 }, enableMouseTracking: false //这个让鼠标放到数据点的时候，不动态显示一个小圆圈，默认为true } }, series: [{ //这里省略了一个data数组的标示，更为方便，实际上下面的name和data都是属于data数组元素的属性，下面2组数据，就代表2组数据并列 name: ‘Tokyo‘, //数据名 data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] //具体数据 }, { 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>
Highcharts is a simple JS chart framework. It is not recommended that you read the API documentation carefully. You are advised to add features while learning quickly based on the examples and actual needs.
PS: I was reminded by skdia that this highchars Chinese network and bootstrap Chinese network are basically based on the same home page style. It was founded by a student who just graduated this year and is really young and promising! It has little to do with highcharts official (http://www.highcharts.com. But as a non-profit website, it is very good! The bootstrap Chinese network is actually similar to this one. I personally guess that these Chinese websites may have little to do with foreign official websites, but they were created by enthusiastic technical staff in China for technical exchanges. The website content basically originated from the official website.
Highcharts-an easy-to-use icon creation tool
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
