Highcharts入门小示例

时间 2019-11-09

标签 highcharts 入门示例繁體版

原文原文链接

1、建立条形图javascript

　　一、建立div容器html

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

　　二、编写图表配置代码java

　　相关示例：jquery

　　<html>学习

　　　　<head>spa

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

 　　 <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>
运行后的效果：

2、如何学习Highcharts

　　一、准备知识code

- 熟悉Html、jQuery、Json、Ajax等前端知识
- 至少会一种后台语言，例如 Php、Java、Asp.net、Nodejs 等（Highcharts只是作数据展示，具体的数据来源必须经过动态语言）

　　二、几点建议cdn

- 学习任何东西都是从实例模仿、本身实践中掌握的
- 多看API，Highcharts 提供的API文档很是完善，几乎全部的问题均可以在 API 找到解决办法