js编写柱状图代码（js柱状图如何实现）

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

本文目录一览：

• 1、js代码怎么比较柱状的数值的大小赋予柱状不同颜色
• 2、用jsp怎样生成柱状图，饼状图，折线图
• 3、如何使用html和js，css代码生成柱状图和饼

js代码怎么比较柱状的数值的大小赋予柱状不同颜色

你好！

为不同数据的柱状图赋值对应的颜色，只需要设置series-data中每个元素的color属性即可。

//定义一个颜色数组

var COLORS = ['#4dc9f6','#f67019','#f53794','#537bc4','#acc236','#166a8f','#00a950','#58595b','#8549ba'];

//根据数值返回对应的颜色值

var getColorByData = function(v) {

    return v  80 ? COLORS[0]

         : v  83 ? COLORS[1]

         : v  86 ? COLORS[2]

         : v  87 ? COLORS[3]

         : v  88 ? COLORS[4]

         : v  89 ? COLORS[5]

         : COLORS[6];

}

//对图表数据进行color属性赋值,用于显示

var genData = function(data) {

    if(data  data.length0) {

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

            data[i].color = getColorByData(data[i].y);

        }

    }

    return data;

}

//图表数据

var _data = [

  {

    name: "下车体1#",

y: 88,

  },

  {

name: "下车体2#",

y: 89,

  },

  {

name: "下车体3#",

y: 82,

  },

  {

name: "下车体4#",

y: 85,

  },

];

Highcharts.chart('gongzhuangjiancha', {

  chart: {

type: 'column'

  }, 

  title: {

text: ''

  },

  xAxis: {

    type: 'category'

  },

  yAxis: {

max: 100,

min:50,

title: {

        text: null

}

  },

  legend: {

enabled: false

  },

  plotOptions: {

    series: {

    borderWidth: 0,

      dataLabels: {

enabled: true,

format: '{point.y:.1f}%'

  }

}

  },

  tooltip: {

    headerFormat: 'span style="font-size:11px"/spanbr',

pointFormat: 'span style="color:{green}"{point.name}/span: b符合率为{point.y:.2f}%/bbr/'

  },

  series: [

      {

  name: "Browsers",

  colorByPoint:false ,

      data: genData(_data)

}

  ],

});

代码比较简单，看下注释很好理解。

希望对你有帮助！

用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和js，css代码生成柱状图和饼

1、使用CSS（层叠样式表）如何使用样式当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：外部样式表当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。内部样式表当单个文件需要特别样式时，就可以使用内部样式表。你可以在head部分通过标签定义内部样式表。body{background-color:red}p{margin-left:20px}内联样式当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性。以下实例显示出如何改变段落的颜色和左外边距。Thisisaparagraph2、使用脚本HTMLscript元素提示：如果需要学习有关在HTML中编写脚本的知识，请访问我们的JavaScript教程。标签标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。noscript元素可包含普通HTML页面的body元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时，才会显示noscript元素中的内容：YourbrowserdoesnotsupportJavaScript!如何应付老式的浏览器如果浏览器压根没法识别VBScript:

js编写柱状图代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js柱状图如何实现、js编写柱状图代码的信息别忘了在本站进行查找喔。