當前位置：首頁 » 網頁前端 » 前端vue柱狀圖餅狀圖
擴展閱讀
提分平台的賬號密碼是什麼 2023-08-31 22:07:10
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端vue柱狀圖餅狀圖

發布時間: 2022-08-21 22:15:15

『壹』 java web中怎麼實現柱形圖、餅狀圖等數據圖

可以通過EXTJS，裡面有控制項，數據你可以從JSP後台獲取，以前在存量房評估系統中就是使用這個繪制的，還不錯。。

『貳』 前端如何實現立體餅圖，柱狀圖，像下面這種

有很多插件的，當然你要是會用svg畫也行，在工作中大部份人都是用插件，比如echarts，你可以去它的官網看看有沒有你想要的柱狀圖行，然後改一改，應該也差不多了。

『叄』 這種條件下,如何做柱狀圖/餅狀圖



『肆』 用jsp怎樣生成柱狀圖，餅狀圖，折線圖

jsp生成柱狀圖，餅狀圖，折線圖可以藉助於jfreechart。

1、柱狀圖的生成源碼：

/**

*生產柱狀圖

*@version1.0

*@since

*/

@SuppressWarnings("serial")

{

@Override

protectedvoidservice(HttpServletRequestrequest,

HttpServletResponseresponse)throwsServletException,IOException{

response.setContentType("text/html");

//使用普通數據集

=newDefaultCategoryDataset();

//增加測試數據，第一個參數是訪問量，最後一個是時間，中間是顯示用不考慮

chartDate.addValue(55,"訪問量","2010-01");

chartDate.addValue(65,"訪問量","2010-02");

chartDate.addValue(59,"訪問量","2010-03");

chartDate.addValue(156,"訪問量","2010-04");

chartDate.addValue(452,"訪問量","2010-05");

chartDate.addValue(359,"訪問量","2010-06");

try{

//從資料庫中獲得數據集

DefaultCategoryDatasetdata=chartDate;

//使用ChartFactory創建3D柱狀圖，不想使用3D，直接使用createBarChart

JFreeChartchart=ChartFactory.createBarChart3D(

"網站月訪問量統計",//圖表標題

"時間",//目錄軸的顯示標簽

"訪問量",//數值軸的顯示標簽

data,//數據集

PlotOrientation.VERTICAL,//圖表方向，此處為垂直方向

//PlotOrientation.HORIZONTAL,//圖表方向，此處為水平方向

true,//是否顯示圖例

true,//是否生成工具

false//是否生成URL鏈接

);

//設置整個圖片的背景色

chart.setBackgroundPaint(Color.PINK);

//設置圖片有邊框

chart.setBorderVisible(true);

Fontkfont=newFont("宋體",Font.PLAIN,12);//底部

FonttitleFont=newFont("宋體",Font.BOLD,25);//圖片標題

//圖片標題

chart.setTitle(newTextTitle(chart.getTitle().getText(),titleFont));

//底部

chart.getLegend().setItemFont(kfont);

//得到坐標設置字體解決亂碼

CategoryPlotcategoryplot=(CategoryPlot)chart.getPlot();

categoryplot.setDomainGridlinesVisible(true);

categoryplot.setRangeCrosshairVisible(true);

categoryplot.setRangeCrosshairPaint(Color.blue);

NumberAxisnumberaxis=(NumberAxis)categoryplot.getRangeAxis();

numberaxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());

BarRendererbarrenderer=(BarRenderer)categoryplot.getRenderer();

barrenderer.setBaseItemLabelFont(newFont("宋體",Font.PLAIN,12));

barrenderer.setSeriesItemLabelFont(1,newFont("宋體",Font.PLAIN,12));

CategoryAxisdomainAxis=categoryplot.getDomainAxis();

/*------設置X軸坐標上的文字-----------*/

domainAxis.setTickLabelFont(newFont("sans-serif",Font.PLAIN,11));

/*------設置X軸的標題文字------------*/

domainAxis.setLabelFont(newFont("宋體",Font.PLAIN,12));

/*------設置Y軸坐標上的文字-----------*/

numberaxis.setTickLabelFont(newFont("sans-serif",Font.PLAIN,12));

/*------設置Y軸的標題文字------------*/

numberaxis.setLabelFont(newFont("宋體",Font.PLAIN,12));

/*------這句代碼解決了底部漢字亂碼的問題-----------*/

chart.getLegend().setItemFont(newFont("宋體",Font.PLAIN,12));

//生成圖片並輸出

ChartUtilities.writeChartAsJPEG(response.getOutputStream(),1.0f,

chart,500,300,null);

}catch(Exceptione){

e.printStackTrace();

}

}

}

2、生成餅狀統計圖：

/**

*生成餅狀統計圖

*@version1.0

*@since

*/

@SuppressWarnings("serial")

{

protectedvoidservice(HttpServletRequestrequest,

HttpServletResponseresponse)throwsServletException,IOException{

response.setContentType("text/html");

//默認數據類型

DefaultPieDatasetdataType=newDefaultPieDataset();

//數據參數內容，數量

dataType.setValue("IE6",156);

dataType.setValue("IE7",230);

dataType.setValue("IE8",45);

dataType.setValue("火狐",640);

dataType.setValue("谷歌",245);

try{

DefaultPieDatasetdata=dataType;

//生成普通餅狀圖除掉3D即可

//生產3D餅狀圖

PiePlot3Dplot=newPiePlot3D(data);

JFreeChartchart=newJFreeChart(

"用戶使用的瀏覽器類型",//圖形標題

JFreeChart.DEFAULT_TITLE_FONT,//標題字體

plot,//圖標標題對象

true//是否顯示圖例

);

//設置整個圖片的背景色

chart.setBackgroundPaint(Color.PINK);

//設置圖片有邊框

chart.setBorderVisible(true);

//配置字體

Fontkfont=newFont("宋體",Font.PLAIN,12);//底部

FonttitleFont=newFont("宋體",Font.BOLD,25);//圖片標題

//圖片標題

chart.setTitle(newTextTitle(chart.getTitle().getText(),titleFont));

//底部

chart.getLegend().setItemFont(kfont);

ChartUtilities.writeChartAsJPEG(response.getOutputStream(),1.0f,

chart,500,300,null);

}catch(Exceptione){

e.printStackTrace();

}

}

}

3、柱狀分布統計圖：

/**

*柱狀分布統計圖

*@version1.0

*@since

*/

@SuppressWarnings("serial")

{

protectedvoidservice(HttpServletRequestrequest,

HttpServletResponseresponse)throwsServletException,IOException{

response.setContentType("text/html");

=newDefaultCategoryDataset();

//這是一組數據

dataTime.addValue(52,"0-6","2010-1-1");

dataTime.addValue(86,"6-12","2010-1-1");

dataTime.addValue(126,"12-18","2010-1-1");

dataTime.addValue(42,"18-24","2010-1-1");

//這是一組數據

dataTime.addValue(452,"0-6","2010-1-2");

dataTime.addValue(96,"6-12","2010-1-2");

dataTime.addValue(254,"12-18","2010-1-2");

dataTime.addValue(126,"18-24","2010-1-2");

//這是一組數據

dataTime.addValue(256,"0-6","2010-1-3");

dataTime.addValue(86,"6-12","2010-1-3");

dataTime.addValue(365,"12-18","2010-1-3");

dataTime.addValue(24,"18-24","2010-1-3");

try{

DefaultCategoryDatasetdata=dataTime;

//使用ChartFactory創建3D柱狀圖，不想使用3D，直接使用createBarChart

JFreeChartchart=ChartFactory.createBarChart3D(

"網站時間段訪問量統計",

"時間",

"訪問量",

data,

PlotOrientation.VERTICAL,

true,

false,

false

);

//設置整個圖片的背景色

chart.setBackgroundPaint(Color.PINK);

//設置圖片有邊框

chart.setBorderVisible(true);

Fontkfont=newFont("宋體",Font.PLAIN,12);//底部

FonttitleFont=newFont("宋體",Font.BOLD,25);//圖片標題

//圖片標題

chart.setTitle(newTextTitle(chart.getTitle().getText(),titleFont));

//底部

chart.getLegend().setItemFont(kfont);

//得到坐標設置字體解決亂碼

CategoryPlotcategoryplot=(CategoryPlot)chart.getPlot();

categoryplot.setDomainGridlinesVisible(true);

categoryplot.setRangeCrosshairVisible(true);

categoryplot.setRangeCrosshairPaint(Color.blue);

NumberAxisnumberaxis=(NumberAxis)categoryplot.getRangeAxis();

numberaxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());

BarRendererbarrenderer=(BarRenderer)categoryplot.getRenderer();

barrenderer.setBaseItemLabelFont(newFont("宋體",Font.PLAIN,12));

barrenderer.setSeriesItemLabelFont(1,newFont("宋體",Font.PLAIN,12));

CategoryAxisdomainAxis=categoryplot.getDomainAxis();

/*------設置X軸坐標上的文字-----------*/

domainAxis.setTickLabelFont(newFont("sans-serif",Font.PLAIN,11));

/*------設置X軸的標題文字------------*/

domainAxis.setLabelFont(newFont("宋體",Font.PLAIN,12));

/*------設置Y軸坐標上的文字-----------*/

numberaxis.setTickLabelFont(newFont("sans-serif",Font.PLAIN,12));

/*------設置Y軸的標題文字------------*/

numberaxis.setLabelFont(newFont("宋體",Font.PLAIN,12));

/*------這句代碼解決了底部漢字亂碼的問題-----------*/

chart.getLegend().setItemFont(newFont("宋體",Font.PLAIN,12));

ChartUtilities.writeChartAsJPEG(response.getOutputStream(),1.0f,

chart,500,300,null);

}catch(Exceptiones){

es.printStackTrace();

}

}

}

『伍』 js 做3D的柱狀圖和餅狀圖的js庫有哪些求大神們介紹。只限制js庫，或者純javascript。謝謝~~

當然是highchart 好用 ！！！！

『陸』 如何使用html和js，css代碼生成柱狀圖和餅狀圖

建議直接使用JSChart或HighChart、EChart、FusionCharts之類的工具，裡面CSS\JS都是組裝好的，只需要調整一些參數即可使用。

『柒』 如何做柱狀圖或餅狀圖

插入——對象——在「新建」選項卡裡面
選擇「Microsoft
Excel
圖標」

『捌』 前端用echarts實現表格形柱形圖的有哪些

ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性 化定製的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀表 盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展 現。模塊化單文件引入(推薦)1新建一個echarts.html文件，為ECharts准備一個具備大小(寬高)的Dom，2新建script標簽引入模塊化單文件echarts.js，3新建script標簽中為模塊載入器配置echarts和所需圖表的路徑(相對路徑為從當前頁面鏈接到echarts.js)，4script標簽內動態載入echarts和所需圖表，回調函數中可以初始化圖表並驅動圖表的生成，5瀏覽器中打開ecarts.html，就可以看到以下效果，：END標簽式單文件引入新建一個echarts.html文件，為ECharts准備一個具備大小(寬高)的Dom，新建script標簽引入echart-all.js，新建script，使用全局變數echarts初始化圖表並驅動圖表的生成，瀏覽器中打開echarts.html，可以看到如下效果，

『玖』 柱狀圖與餅狀圖的區別

柱形圖在比較相互之間的差距比較明顯直觀，餅狀圖是反應在同一范圍內各自的佔比時比較直觀！

『拾』 C#怎樣實現報表的柱狀圖，餅狀圖，折線圖

以下是實現報表的柱狀圖，餅狀圖，折線圖的詳細操作步驟：

  • 第一步：在工程中添加ActiveReports區域報表

  • 第二步：添加Chart控制項至報表設計界面

  • 第三步：設置報表屬性

  • 第四步：定製圖表屬性

具體的步驟實現，請參考下面的博客

http://blog.gcpowertools.com.cn/post/ActiveReports_Multi_Series_Chart.aspx

閱讀全文

與前端vue柱狀圖餅狀圖相關的內容

本站內容整理源於互聯網，如有問題請聯系解決。
Copyright design: www.gotrillian.com since 2022