立体柱状图的实现

前几天自己写了个平面的柱状图的实现,呵呵!现在花了一点时间,将其其升级为了立体柱状图.还是用的JApplet做的试图,现在没加双缓冲,所以看到的是一个一个的出现的,有时间的话我再好好把这两个类重构下,加个双缓冲,呵呵!效果如图:

立方图

示例代码如下:

package com.lazy.histogram; import java.awt.Color; import java.awt.Dimension; import java.awt.Font; import java.awt.FontMetrics; import java.awt.Graphics; import javax.swing.JApplet; /** * * @author lazy_p * @version 1.0 * */ public class Histogram extends JApplet { private static final long serialVersionUID = 3562814718711641084L; private final int histogramWidth = 15; // 柱宽 private int histogramPitch = 10;// 间距 private float scaling = 0.0f; private int maxStrWidth = 0; // 字符串需要的最大宽度 public Histogram() { } @Override public void paint(Graphics g) { // setSize(200, 250); int[] b = new int[] { 100, 1000, 1200, 900 }; Color[] color = new Color[] { Color.red, Color.green, Color.lightGray, Color.BLUE }; paintHistogram(g, b, new String[] { "香蕉", "萝卜", "菠萝菠萝蜜", "西瓜" }, color); } /** * 画基面 * * @param g */ private void paintBase(Graphics g) { g.drawPolygon(new int[] { 10, 40, 40, 10 }, new int[] { 30, 10, this.getHeight() - 30, this.getHeight() - 10 }, 4); g.setColor(new Color(100, 100, 100, 20)); g.fillPolygon(new int[] { 10, 40, 40, 10 }, new int[] { 30, 10, this.getHeight() - 30, this.getHeight() - 10 }, 4); g.setColor(Color.BLACK); g.drawPolygon(new int[] { 10, 40, this.getWidth() - 10, this.getWidth() - 30 }, new int[] { this.getHeight() - 10, this.getHeight() - 30, this.getHeight() - 30, this.getHeight() - 10 }, 4); g.setColor(new Color(100, 100, 100, 20)); g.fillPolygon(new int[] { 10, 40, this.getWidth() - 10, this.getWidth() - 30 }, new int[] { this.getHeight() - 10, this.getHeight() - 30, this.getHeight() - 30, this.getHeight() - 10 }, 4); } private void paintHistogram(Graphics g, int[] b, String[] str, Color[] color) { int hWidth = this.getWidth(); int hHeight = this.getHeight(); FontMetrics metrics = this .getFontMetrics(new Font(null, Font.PLAIN, 12)); setSize(calculate(hHeight, str, b, metrics)); paintBase(g); // 画基平面 int len = b.length; for (int i = 0; i < len; ++i) { // //画比例 g.setColor(trans(color[i], 255)); Font font = new Font(null, Font.PLAIN, 12); g .drawString(b[i] + "", (20 + (histogramPitch + histogramWidth + (maxStrWidth >> 1)) * i) + ((histogramWidth - metrics.stringWidth(String .valueOf(b[i]))) >> 1), (int) (this .getHeight() - 25 - b[i] * scaling)); g.setColor(trans(color[i], 150)); int x = histogramWidth + (histogramWidth + histogramPitch + (maxStrWidth >> 1)) * i; // //画上面 if (i == 0) x += 10; // 画第一个立方方柱时 g.drawPolygon(new int[] { x, 5 + x, 20 + x, 15 + x }, new int[] { (int) (this.getHeight() - 15 - b[i] * scaling), (int) (this.getHeight() - 25 - b[i] * scaling), (int) (this.getHeight() - 25 - b[i] * scaling), (int) (this.getHeight() - 15 - b[i] * scaling) }, 4); g.fillPolygon(new int[] { x, 5 + x, 20 + x, 15 + x }, new int[] { (int) (this.getHeight() - 15 - b[i] * scaling), (int) (this.getHeight() - 25 - b[i] * scaling), (int) (this.getHeight() - 25 - b[i] * scaling), (int) (this.getHeight() - 15 - b[i] * scaling) }, 4); // 画左侧面// // g.setColor(trans(color[i], 20)); // g.drawPolygon(new int[] { 15 + 25 * i, 20 + 25 * i, 20 + 25 * i, // 15 + 25 * i }, new int[] { // this.getHeight() - 15 - b[i], // this.getHeight() - 25 - b[i], this.getHeight() - 25, // this.getHeight() - 15 }, 4); // g.setColor(trans(color[i], 20)); // g.fillPolygon(new int[] { 15 + 25 * i, 20 + 25 * i, 20 + 25 * i, // 15 + 25 * i }, new int[] { // this.getHeight() - 15 - b[i], // this.getHeight() - 25 - b[i], this.getHeight() - 25, // this.getHeight() - 15 }, 4); 画后面/ // g.setColor(trans(color[i], 20)); // g.drawRect(20 + 25 * i, this.getHeight() - 25 - b[i], 15, // b[i]); // g.fillRect(20 + 25 * i, this.getHeight() - 25 - b[i], 15, // b[i]); // 画前面部分/// g.drawRect(x, (int) (this.getHeight() - 15 - b[i] * scaling), histogramWidth, (int) (b[i] * scaling)); // System.out.println((int) (b[i] * scaling)); g.fillRect(x, (int) (this.getHeight() - 15 - b[i] * scaling), histogramWidth, (int) (b[i] * scaling)); // 画右侧面/ g.drawPolygon(new int[] { 15 + x, 20 + x, 20 + x, 15 + x }, new int[] { (int) (this.getHeight() - 15 - b[i] * scaling), (int) (this.getHeight() - 25 - b[i] * scaling), this.getHeight() - 25, this.getHeight() - 15 }, 4); g.fillPolygon(new int[] { 15 + x, 20 + x, 20 + x, 15 + x }, new int[] { (int) (this.getHeight() - 15 - b[i] * scaling), (int) (this.getHeight() - 25 - b[i] * scaling), this.getHeight() - 25, this.getHeight() - 15 }, 4); g.setColor(trans(color[i], 255)); g.drawString(str[i] + "", (5 + x) + ((histogramWidth - this.getFontMetrics(font).stringWidth( str[i])) >> 1), this.getHeight() - 2); } } /** * 给颜色加上透明度 * * @param color * @param alpha * 透明值(0-256) * @return Color * */ private Color trans(Color color, int alpha) { int rgb = color.getRGB(); int r = (rgb >> 16) & 0xff; int g = (rgb >> 8) & 0xff; int b = rgb & 0xff; return new Color(r, g, b, alpha); } private Dimension calculate(int h, String[] str, int[] b, FontMetrics metrics) { int len = b.length; int max = -1; for (int i = 0; i < len; ++i) { if (b[i] > max) max = b[i]; } int height = h; if (max > this.getHeight()) { scaling = (float) this.getHeight() / (max + 300); // 加了个任意数300, // 是为了让立方柱的高度始终小于整个applet的高度 } len = str.length; for (int i = 0; i < len; ++i) { if (metrics.stringWidth(str[i]) > maxStrWidth) maxStrWidth = metrics.stringWidth(str[i]); } int width = b.length * ((maxStrWidth >> 1) + histogramPitch + histogramWidth) + 20; // System.out.println(width); // return new Dimension(width, height+20);//如果这样写会有个很奇怪的现象出现,不知道为什么?郁闷..... return new Dimension(width, height); } }

要使用ECharts实现立体柱状图,你可以使用ECharts提供的bar3D系列。首先,你需要引入ECharts的库文件。你可以在这里下载ECharts的最新版本。接下来,你需要在HTML文件中创建一个容器,用于展示图表。然后,你可以使用以下代码来实现一个简单的多立体柱状图: ```javascript // 引入ECharts库 <script src="echarts.min.js"></script> // 创建图表容器 <div id="chart" style="width: 600px; height: 400px;"></div> // 使用ECharts绘制多立体柱状图 <script> // 初始化图表 var chart = echarts.init(document.getElementById('chart')); // 定义图表的配置项和数据 var option = { tooltip: {}, visualMap: { max: 20, inRange: { color: ['#87cefa', '#006edd'] } }, xAxis3D: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] }, yAxis3D: { type: 'value' }, zAxis3D: { type: 'category', data: ['Category 1', 'Category 2', 'Category 3'] #### 引用[.reference_title] - *1* [echarts 立体柱状图(多个柱状图)](https://blog.csdn.net/cjy_fly/article/details/127037205)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [通过Echarts怎样实现立体柱状图](https://blog.csdn.net/weixin_55123102/article/details/129157175)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [使用echarts实现立体-柱状图](https://download.csdn.net/download/weixin_41620505/86247612)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值