First, create a bar chart
1. Create DIV container
<div id="container" style="min-width:800px;height:400px"></div>
2. Write Chart Configuration Code
Related examples:
<html>
<head>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<ScriptType="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: [' Apple ',' Banana ',' Oranges ']Specify X-Axis grouping}, YAxis: {title: {text:' Something '}, series: [{Specify the data column name:' Xiao Ming ',Data column Name: [1,0,4] //data}, {name: ' Little Red ', data: [5, 7, 3]}]}); }); </script> </ head> <body> <div id= " Container "style=" min-width:800px;height:400px; " ></div> </ body> </HTML>
effect after run:
Second, how to learn Highcharts
1. Prepare knowledge
-
- Familiar with HTML, JQuery, Json, Ajax and other front-end knowledge
- At least one background language, such as PHP, Java, ASP. NET, Nodejs, etc. (highcharts only do data presentation, the specific data source must be dynamic language)
2, a few suggestions
-
- Learning anything is from the example of imitation, in their own practice mastered
- Look at the API documentation provided by Api,highcharts is perfect, almost all the problems can be found in the API solution
Highcharts Getting Started small sample