html柱状统计图代码（html 统计图）

今天给各位分享html柱状统计图代码的知识，其中也会对html 统计图进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、用asp.net怎么实现统计图（柱状）
• 2、用jsp怎样生成柱状图，饼状图，折线图
• 3、如何在 HTML 页面上显示出有交互的统计图

用asp.net怎么实现统计图（柱状）

使用MSChart控件即可（我用VS2010完成）——【aspx关键代码】html xmlns=" "

head runat="server"

title/title

/head

body

form id="form1" runat="server"

div

asp:Chart ID="Chart1" runat="server" Height="316px" Width="485px"

Series

asp:Series Name="Series1"

/asp:Series

/Series

ChartAreas

asp:ChartArea Name="ChartArea1"

AxisX Enabled="True" IntervalAutoMode="VariableCount"

/AxisX

/asp:ChartArea

/ChartAreas

/asp:Chart

/div

/form

/body

/html 后台代码：namespace WebApplication1

{

public partial class WebForm1 : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

//模拟数据

DataTable dt = new DataTable();

dt.Columns.Add("Value", typeof(double));

dt.Columns.Add("Name", typeof(string));

Random r = new Random(DateTime.Now.Millisecond); for (int i = 1; i 11; i++)

{

dt.Rows.Add(r.NextDouble() * 50 + 10, "Name" + i);

} Chart1.DataSource = dt;

Chart1.Series[0].XValueMember = "Name";

Chart1.Series[0].YValueMembers = "Value";

Chart1.DataBind();

}

}

}

}效果： 如果你想在VS2008中用，请具体参考（点击， ，查看）

用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();

}

}

}

如何在 HTML 页面上显示出有交互的统计图

在 HTML 页面上显示出有交互的统计图有2种方法：

一、用JavaScript做出饼状图或柱形图，需要精通JS代码。

二、利用第三方网站提供的组件：

1、Open Flash Chart是一个开源的Flash制图组件。

2、 XML SWF Charts是一个简单，但强大，利用Flash和动态生成XML数据来产生web chart的工具。

3、 Flotr是一个基于Prototype开发的javascript绘图工具。支持图例，鼠标跟踪，图片区域选择，图片缩放，添加事件钩子（event hook），通过CSS设置样式等。

4、FusionCharts Free是一个制图组件用于创建好看，数据驱动，拥有动画效果的Flash charts。它能够与PHP、Python、Ruby on Rails、ASP、、JSP、ColdFusion、HTML页面等一起使用。这个组件是FusionCharts的免费版，但功能仍然很强大。

关于html柱状统计图代码和html 统计图的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。