2. 程式人生 > >SpringMVC整合Highcharts（基本餅圖，條形圖，柱狀圖）

SpringMVC整合Highcharts（基本餅圖，條形圖，柱狀圖）

阿新 • • 發佈：2019-02-18
//條形圖 var chart = Highcharts.chart('container',{ title: { text: 'Solar Employment Growth by Sector, 2010-2016' }, credits: { enabled: false}, exporting: { enabled: false }, subtitle: { text: 'Source: thesolarfoundation.com'
}, yAxis: { title: { text: 'Number of Employees' } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle' }, plotOptions: { series: { label: { connectorAllowed: false
}, pointStart: 2010 } }, series: [{ name: 'Installation' }, { name: 'Manufacturing' }, { name: 'Sales & Distribution' }, { name: 'Project Development'
}], responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom' } } }] } }); //柱狀圖 var chart2 = Highcharts.chart('container2', { chart: { type: 'column' }, credits: { enabled: false}, exporting: { enabled: false }, title: { text: '每月降雨量' }, subtitle: { text: 'Source: WorldClimate.com' }, xAxis: { categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ], crosshair: true }, yAxis: { min: 0, title: { text: 'Rainfall (mm)' } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [{ name: '四川' },{ name: '廣西' },{ name: '山東' },{ name: '浙江' }] }); //餅圖 var chart3 = Highcharts.chart('container3',{ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, credits: { enabled: false}, exporting: { enabled: false }, title: { text: '瀏覽器份額' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }, series: [{ name: 'Brands', colorByPoint: true }] }); //餅圖 var chart4 = Highcharts.chart('container4',{ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, credits: { enabled: false}, exporting: { enabled: false }, title: { text: '瀏覽器份額' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }, series: [{ name: 'Brands', colorByPoint: true }] }); $(document).ready(function () { $.ajax({ type:"GET", url:'${rc.getContextPath()}/demo/pieValue',//提供資料的Servlet success:function(data){ //定義一個數組 var browsers = []; //迭代，把非同步獲取的資料放到陣列中 $.each(data,function(i,d){ browsers.push([d.name,d.value]); }); //var browsers = []; //browsers.push(['AAA',1]); //browsers.push(['業務辦理',422]); //browsers.push(['業務諮詢',587]); //browsers.push(['其他',115]); //browsers.push(['投訴與建議',350]); //browsers.push(['放款資訊',54]); chart3.series[0].setData(browsers); }, error:function(e){ alert(e); } }); $.ajax({ type:"GET", url:'${rc.getContextPath()}/demo/pieValue',//提供資料的Servlet success:function(data){ //定義一個數組 var browsers = []; //迭代，把非同步獲取的資料放到陣列中 $.each(data,function(i,d){ browsers.push(['AAA',555]); }); //設定資料 chart4.series[0].setData(browsers); }, error:function(e){ alert(e); } }); $.ajax({ type:"GET", url:'${rc.getContextPath()}/chart/columeValue',//提供資料的Servlet success:function(data){ //迭代，把非同步獲取的資料放到陣列中 $.each(data,function(i,d){ chart2.series[i].setData(d.data); }); }, error:function(e){ alert(e); } }); $.ajax({ type:"GET", url:'${rc.getContextPath()}/chart/columeValue',//提供資料的Servlet success:function(data){ //迭代，把非同步獲取的資料放到陣列中 $.each(data,function(i,d){ chart.series[i].setData(d.data); }); }, error:function(e){ alert(e); } }); });

相關推薦

SpringMVC整合Highcharts（基本餅圖，條形圖，柱狀圖）

//條形圖 var chart = Highcharts.chart('container',{ title: { text: 'Solar Employment Growth by Sector, 2010-2016

echarts柱狀圖與中國地圖聯動，滑鼠移入柱狀圖，地圖響應地顯示資料

echarts顯示柱狀圖的時候，旁邊放一張中國地圖，當滑鼠移入柱狀圖，旁邊中國地圖對應的區域亮起來。先放效果圖~~這是原始頁面這是滑鼠移上去的樣子這是滑鼠離開之後的樣子總之呢，就是給他倆弄一個聯動的效果，移入柱狀圖，地圖跟著動起來，並且資料跟著變。柱狀圖後臺資料庫：地圖後臺資

一點點前端程式碼，使用ECharts插入柱狀圖

一、前提 現在我們在做一些web前端，將我們的一些自動化工具整合和視覺化。 下面的工作是想在web頁面上插入一個柱狀圖顯示不同型別測試賬號的使用情況。 java工程採用的jsp。下面是引用的jsp介紹。 JSP 與 PHP、ASP、ASP.NET 等語言類

JavaScript數據可視化編程學習（一）Flotr2，包含簡單的，柱狀圖，折線圖，餅圖，散點圖

基礎 沒有 cat 勝利 而是 5.4 最好的 表數據 聯系 一、基礎柱狀圖 二、基礎的折線圖 三、基礎的餅圖 四、基礎的散點圖 一、基礎柱狀圖 如果你還沒有想好你的數據用什麽類型的圖表來展示你的數據，你應該首先考慮是否可以做成柱狀圖。柱狀圖可以表示數據的

關於安卓專案中統計資料achartengine類（包括餅狀圖，柱狀圖，折線圖等）的使用

       最近由於專案中需要統計資料，通過比較直觀的方式展示給使用者，所以就抽時間學習了一個統計圖的類庫achartengine，裡面包含統計中所需的餅狀圖，柱狀圖，折線圖等等，所以就拿出來給大家分享一下，希望大家相互學習，如有不足之處

使用ECharts實現各種資料統計圖（餅圖，柱狀圖，折線圖）在javaWeb中的應用

具體的資源及頁面程式碼可下載  http://download.csdn.net/download/dll322/9912507 準備工作：要下載ECharts的原始檔 第一步：在web端既新建一個jsp頁面 第二步：引入ECharts的js 第三步：為EChart

ECHART基本使用，折線圖，柱狀圖，散點圖，餅圖，盒形圖5分鐘上手

Echarts 是由百度團隊打造的純 JavaScript 的圖表庫，官網下載路徑如下： Echarts的特性： 豐富的圖表型別： 常用的有折線圖，柱狀圖，散點圖，餅圖，盒形圖，用於地理資料視覺化的地圖，熱力圖，線圖等 多個座標系的支援 直角座標系（c

基於SpringMVC框架使用ECharts3.0實現折線圖，柱狀圖，餅狀圖,的繪製

頁面部分：<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l

highcharts之柱狀圖，折線圖，餅圖組合顯示

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title&

圖標插件--jqplot實現柱狀圖及餅圖，表盤圖演示樣例

itl nbsp left 柱狀圖 draw ted ner ann name 柱狀圖 在jqPlot圖表插件使用說明（一）中，我們已經能夠通過jqPlot繪制出比較簡單的線形圖。通過查看源碼。我們也能夠看出，線形圖是jqPlot默認的圖表類型：

利用echarts highcharts 實現自定義地圖 關系圖效果 側邊3D柱形圖餅圖散點圖

技術 ges 散點圖 chart blog 餅圖 git 分享 charts github 地址： https://https://github.com/Gengshaoxuan/medataMap github 地址： https://https://github.c

ECharts 報表事件聯動系列三：柱狀圖，餅狀圖實現聯動

餅狀圖 img and int js函數 radius func get 執行 源碼如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type

SpringMVC整合Swagger（非Spring Boot）

width acf audio cnblogs restfu sele type img sep 1.新建項目 1.1 maven項目 1.2 設置項目名 1.3 設置本地maven 1.4 finish 2.添加依賴 打開pom文件，添加下面

SpringMVC 整合 kaptcha（驗證碼功能）

一、新增依賴 <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>

echart折線圖，柱狀圖，餅圖設定顏色

好記性不如爛筆頭！！！ 1、折線圖修改顏色：   xAxis: {           type: 'category',  

highchart 柱狀圖，列寬自適應（x軸是時間的特殊情況）

1、柱子列寬自適屬性： pointWidth:25, //柱子寬度,如果設定該值，則下面2個屬性無效 pointPadding: 0.4,//每列之間的距離值,預設此值為0.1 groupPadding: 0,//每個值之間的間距，其實和poingPadding有一樣的效果。不過這個主要是用於對付存在分組的

用g.raphael.js高速繪製餅圖、柱狀圖、點狀圖、折線圖（下）

首先，這裡有個g.raphael.js的範例文章，可以直接看，我就不轉載了： 好了，接下來我們來試試建立柱狀圖： <script type="text/javascript" src="raphael.js"></script> <scr

echarts 柱狀圖，折線圖互轉例項（資料動態請求後臺）

function initDayChart(){ var myChart = echarts.init(document.getElementById('appLoginLogDayChart')); myChart.setOption({ title : {

echarts，type：bar 柱形圖的行高和寬度（條間距離）設定

type：bar 柱形圖的行高和寬度（條間距離）設定 百度圖表柱形圖的bar之間的行高？好像在文件沒找到對應屬性，只有barGap和barCategoryGap，但單獨設定這兩個一般還達不到我們想要的

ECHARTS的基本使用：柱狀圖、折線圖、餅圖等

Echarts 是由百度團隊打造的一款純 Javascript 的圖表庫，官網下載路徑如下： Echarts的特性： 豐富的圖表型別： 常用的有折線圖，柱狀圖，散點圖，餅圖，盒形圖，用於地理資料視覺化的地圖，熱力圖，線圖等 多個座標系的支援