投稿
  1. 簡單一點首頁
  2. 編程

js餅狀圖代碼,繪製餅圖的代碼

FTGHC • • 編程

本文目錄一覽：

怎麼使用canvas循環生成餅圖

function drawCircle(canvasId, data_arr, color_arr, text_arr) {

    var pi2 = Math.PI*2;

    var canvas =document.getElementById(canvasId);    

    var c =canvas.getContext(“2d”);

    c.font =”12px Times New Roman”;

    var startAgl = 0;

    var agl;

    for(var i=0; i data_arr.length; i++){ 

        //繪製餅圖

        agl = data_arr[i] * pi2 + startAgl;

        c.fillStyle=color_arr[i];

        c.beginPath();

        c.moveTo(200,200);

        c.arc(200, 200, 150, startAgl, agl, false);

        c.lineTo(200,200);

        //c.stroke();

        c.fill();

        startAgl = agl;

        //繪製圖例

        c.fillRect(360, 50+18*i,16,16);

        c.fillStyle=”#000000″;

        c.fillText(text_arr[i], 380, 62+18*i );    

    }

}

以上是繪製餅圖的代碼,效果如下：

至於

%%這個是jsp代碼標記，不能直接調用js代碼

js怎麼製作餅狀圖?

有用SVG的方法

還有用HTML5的canvas控制項

不過這個如果用源生方法的話比較複雜

你可以用一些已經有的框架來做

比如說:Dojo Charting

這是一個JS庫.

你可以參考下

還有就是一些有名氣的JS庫

比如:Ext4.0版本的chart類

示例如下:

JS框架都是一般兼容的

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

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

1、柱狀圖的生成源碼：

/**

* 生產柱狀圖

* @version 1.0

* @since

*/

@SuppressWarnings(“serial”)

public class PillarServlet extends HttpServlet {

@Override

protected void service(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

response.setContentType(“text/html”);

// 使用普通數據集

DefaultCategoryDataset chartDate = new DefaultCategoryDataset();

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

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 {

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

DefaultCategoryDataset data = chartDate;

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

JFreeChart chart = ChartFactory.createBarChart3D(

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

“時間”, // 目錄軸的顯示標籤

“訪問量”, // 數值軸的顯示標籤

data, // 數據集

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

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

true, // 是否顯示圖例

true, // 是否生成工具

false // 是否生成URL鏈接

);

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

chart.setBackgroundPaint(Color.PINK);

// 設置圖片有邊框

chart.setBorderVisible(true);

Font kfont = new Font(“宋體”, Font.PLAIN, 12);    // 底部

Font titleFont = new Font(“宋體”, Font.BOLD, 25); // 圖片標題

// 圖片標題

chart.setTitle(new TextTitle(chart.getTitle().getText(), titleFont));

// 底部

chart.getLegend().setItemFont(kfont);

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

CategoryPlot categoryplot = (CategoryPlot) chart.getPlot();

categoryplot.setDomainGridlinesVisible(true);

categoryplot.setRangeCrosshairVisible(true);

categoryplot.setRangeCrosshairPaint(Color.blue);

NumberAxis numberaxis = (NumberAxis) categoryplot.getRangeAxis();

numberaxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());

BarRenderer barrenderer = (BarRenderer) categoryplot.getRenderer();

barrenderer.setBaseItemLabelFont(new Font(“宋體”, Font.PLAIN, 12));

barrenderer.setSeriesItemLabelFont(1, new Font(“宋體”, Font.PLAIN, 12));

CategoryAxis domainAxis = categoryplot.getDomainAxis();

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

domainAxis.setTickLabelFont(new Font(“sans-serif”, Font.PLAIN, 11));

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

domainAxis.setLabelFont(new Font(“宋體”, Font.PLAIN, 12));

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

numberaxis.setTickLabelFont(new Font(“sans-serif”, Font.PLAIN, 12));

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

numberaxis.setLabelFont(new Font(“宋體”, Font.PLAIN, 12));

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

chart.getLegend().setItemFont(new Font(“宋體”, Font.PLAIN, 12));

// 生成圖片並輸出

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

chart, 500, 300, null);

} catch (Exception e) {

e.printStackTrace();

}

}

}

2、生成餅狀統計圖：

/**

* 生成餅狀統計圖

* @version 1.0

* @since

*/

@SuppressWarnings(“serial”)

public class CakeServlet extends HttpServlet {

protected void service(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

response.setContentType(“text/html”);

// 默認數據類型

DefaultPieDataset dataType = new DefaultPieDataset();

// 數據參數 內容，數量

dataType.setValue(“IE6”, 156);

dataType.setValue(“IE7”, 230);

dataType.setValue(“IE8”, 45);

dataType.setValue(“火狐”, 640);

dataType.setValue(“谷歌”, 245);

try {

DefaultPieDataset data = dataType;

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

// 生產3D餅狀圖

PiePlot3D plot = new PiePlot3D(data);

JFreeChart chart = new JFreeChart(

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

JFreeChart.DEFAULT_TITLE_FONT, // 標題字體

plot,                          // 圖標標題對象

true                           // 是否顯示圖例

);

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

chart.setBackgroundPaint(Color.PINK);

// 設置圖片有邊框

chart.setBorderVisible(true);

// 配置字體

Font kfont = new Font(“宋體”, Font.PLAIN, 12);    // 底部

Font titleFont = new Font(“宋體”, Font.BOLD, 25); // 圖片標題

// 圖片標題

chart.setTitle(new TextTitle(chart.getTitle().getText(), titleFont));

// 底部

chart.getLegend().setItemFont(kfont);

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

chart, 500, 300, null);

} catch (Exception e) {

e.printStackTrace();

}

}

}

3、柱狀分布統計圖：

/**

* 柱狀分布統計圖

* @version 1.0

* @since

*/

@SuppressWarnings(“serial”)

public class ParagraphsServlet extends HttpServlet {

protected void service(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

response.setContentType(“text/html”);

DefaultCategoryDataset dataTime = new DefaultCategoryDataset();

// 這是一組數據

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 {

DefaultCategoryDataset data = dataTime;

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

JFreeChart chart = ChartFactory.createBarChart3D(

“網站時間段訪問量統計”,

“時間”,

“訪問量”,

data,

PlotOrientation.VERTICAL,

true,

false,

false

);

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

chart.setBackgroundPaint(Color.PINK);

// 設置圖片有邊框

chart.setBorderVisible(true);

Font kfont = new Font(“宋體”, Font.PLAIN, 12);    // 底部

Font titleFont = new Font(“宋體”, Font.BOLD, 25); // 圖片標題

// 圖片標題

chart.setTitle(new TextTitle(chart.getTitle().getText(), titleFont));

// 底部

chart.getLegend().setItemFont(kfont);

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

CategoryPlot categoryplot = (CategoryPlot) chart.getPlot();

categoryplot.setDomainGridlinesVisible(true);

categoryplot.setRangeCrosshairVisible(true);

categoryplot.setRangeCrosshairPaint(Color.blue);

NumberAxis numberaxis = (NumberAxis) categoryplot.getRangeAxis();

numberaxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());

BarRenderer barrenderer = (BarRenderer) categoryplot.getRenderer();

barrenderer.setBaseItemLabelFont(new Font(“宋體”, Font.PLAIN, 12));

barrenderer.setSeriesItemLabelFont(1, new Font(“宋體”, Font.PLAIN, 12));

CategoryAxis domainAxis = categoryplot.getDomainAxis();

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

domainAxis.setTickLabelFont(new Font(“sans-serif”, Font.PLAIN, 11));

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

domainAxis.setLabelFont(new Font(“宋體”, Font.PLAIN, 12));

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

numberaxis.setTickLabelFont(new Font(“sans-serif”, Font.PLAIN, 12));

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

numberaxis.setLabelFont(new Font(“宋體”, Font.PLAIN, 12));

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

chart.getLegend().setItemFont(new Font(“宋體”, Font.PLAIN, 12));

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

chart, 500, 300, null);

} catch (Exception es) {

es.printStackTrace();

}

}

}

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

推薦基於webGL的3D框架類庫！three.js的知名度很高，在開源中國、思否、掘金等技術社區會有很多應用指導案例，很多人問我是不是需要學webGL，three.js正是對webgl進行了封裝，提供更高層的渲染介面，不用重新學習3D繪圖底層邏輯。

題主沒有提供太多背景信息，是否具備中高級前端開發基礎？three.js相對於初學者門檻很高，需要花費更多的時間，一個載入模型、調光、選擇模型彈框的功能，就能寫出Threejs上百行代碼。

有一個針對前端轉3D開發初學者的解決方案，推薦thingjs在線平台，開發體驗比較如下：

提醒一下，three.js並沒有特定的行業應用，屬於技術研究範疇；thingjs專註於物聯網3D可視化領域，對於智慧城市、智慧工廠、安全消防、城市交通可視化應用開發者非常友好！做前端技術應用，推薦物聯網3D商業項目方向，15萬個開發者的一致選擇！

原創文章，作者：FTGHC，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/331436.html

贊 (0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
FTGHC的頭像FTGHC
0 0
上一篇 2025-01-16 15:47
下一篇 2025-01-16 15:47

相關推薦

  • Python周杰倫代碼用法介紹

    本文將從多個方面對Python周杰倫代碼進行詳細的闡述。 一、代碼介紹 from urllib.request import urlopen from bs4 import Bea…

    GPYNH的頭像 GPYNH
    編程 2025-04-29

  • JS Proxy(array)用法介紹

    JS Proxy(array)可以說是ES6中非常重要的一個特性，它可以代理一個數組，監聽數據變化並進行攔截、處理。在實際開發中，使用Proxy(array)可以方便地實現數據的監…

    CUGEL的頭像 CUGEL
    編程 2025-04-29

  • Python字元串寬度不限制怎麼打代碼

    本文將為大家詳細介紹Python字元串寬度不限制時如何打代碼的幾個方面。 一、保持代碼風格的統一 在Python字元串寬度不限制的情況下，我們可以寫出很長很長的一行代碼。但是，為了…

    OQFRU的頭像 OQFRU
    編程 2025-04-29

  • Python基礎代碼用法介紹

    本文將從多個方面對Python基礎代碼進行解析和詳細闡述，力求讓讀者深刻理解Python基礎代碼。通過本文的學習，相信大家對Python的學習和應用會更加輕鬆和高效。 一、變數和數…

    BFAIW的頭像 BFAIW
    編程 2025-04-29

  • 倉庫管理系統代碼設計Python

    這篇文章將詳細探討如何設計一個基於Python的倉庫管理系統。 一、基本需求 在著手設計之前，我們首先需要確定倉庫管理系統的基本需求。 我們可以將需求分為以下幾個方面： 1、庫存管…

    EKUXU的頭像 EKUXU
    編程 2025-04-29

  • Python滿天星代碼：讓編程變得更加簡單

    本文將從多個方面詳細闡述Python滿天星代碼，為大家介紹它的優點以及如何在編程中使用。無論是剛剛接觸編程還是資深程序員，都能從中獲得一定的收穫。 一、簡介 Python滿天星代碼…

    DCQKT的頭像 DCQKT
    編程 2025-04-29

  • 寫代碼新手教程

    本文將從語言選擇、學習方法、編碼規範以及常見問題解答等多個方面，為編程新手提供實用、簡明的教程。 一、語言選擇 作為編程新手，選擇一門編程語言是很關鍵的一步。以下是幾個有代表性的編…

    DIYUZ的頭像 DIYUZ
    編程 2025-04-29

  • Python實現簡易心形代碼

    在這個文章中，我們將會介紹如何用Python語言編寫一個非常簡單的代碼來生成一個心形圖案。我們將會從安裝Python開始介紹，逐步深入了解如何實現這一任務。 一、安裝Python …

    DKZPU的頭像 DKZPU
    編程 2025-04-29

  • 怎麼寫不影響Python運行的長段代碼

    在Python編程的過程中，我們不可避免地需要編寫一些長段代碼，包括函數、類、複雜的控制語句等等。在編寫這些代碼時，我們需要考慮代碼可讀性、易用性以及對Python運行性能的影響。…

    SSLAV的頭像 SSLAV
    編程 2025-04-29

  • 北化教務管理系統介紹及開發代碼示例

    本文將從多個方面對北化教務管理系統進行介紹及開發代碼示例，幫助開發者更好地理解和應用該系統。 一、項目介紹 北化教務管理系統是一款針對高校學生和教職工的綜合信息管理系統。系統實現的…

    LTOOO的頭像 LTOOO
    編程 2025-04-29

發表回復

登錄後才能評論