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>
運行後的效果：