HightCharts应用实例

来源：互联网发布：麻瓜编程编辑：程序博客网时间：2024/05/22 11:46

开发中经常用的图标之前有接触过echart，现在有接触了一下hightchart

<html><head><meta charset="UTF-8" /><title>Highcharts 教程 | 菜鸟教程(runoob.com)</title><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="http://code.highcharts.com/highcharts.js"></script></head><body><div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div><script language="JavaScript">$(document).ready(function() {     var chart = {      type: 'bar'   };   var title = {      text: 'Historic World Population by Region'      };   var subtitle = {      text: 'Source: Wikipedia.org'     };   var xAxis = {      categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],      title: {         text: null      }   };   var yAxis = {      min: 0,      title: {         text: 'Population (millions)',         align: 'high'      },      labels: {         overflow: 'justify'      }   };   var tooltip = {      valueSuffix: ' millions'   };   var plotOptions = {      bar: {         dataLabels: {            enabled: true         }      }   };   var legend = {      layout: 'vertical',      align: 'right',      verticalAlign: 'top',      x: -40,      y: 100,      floating: true,      borderWidth: 1,      backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),      shadow: true   };   var credits = {      enabled: false   };      var series= [{         name: 'Year 1800',            data: [107, 31, 635, 203, 2]        }, {            name: 'Year 1900',            data: [133, 156, 947, 408, 6]        }, {            name: 'Year 2008',            data: [973, 914, 4054, 732, 34]          }   ];              var json = {};      json.chart = chart;    json.title = title;      json.subtitle = subtitle;    json.tooltip = tooltip;   json.xAxis = xAxis;   json.yAxis = yAxis;     json.series = series;   json.plotOptions = plotOptions;   json.legend = legend;   json.credits = credits;   $('#container').highcharts(json);  });</script></body></html>

案例学习地址 http://www.runoob.com/highcharts/highcharts-bar-basic.html

阅读全文

0 0