本文目录一览：
- 1、怎么使用canvas循环生成饼图
- 2、js怎么制作饼状图?
- 3、用jsp怎样生成柱状图，饼状图，折线图
- 4、js 做3D的柱状图和饼状图的js库有哪些？求大神们介绍。只限制js库，或者纯javascript。谢谢~~
怎么使用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万个开发者的一致选择！