废话不再多说！
实现一个柱状图，这个柱状图的高度在不停的刷新，效果如下：
官网是没有动态刷新的示例的，由于需要我查看了其源码，并根据之前示例做出了动态柱状图的效果，希望对同学们有用！
看一下代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>Highcharts Example</title>
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="highcharts.js"></script>
<script language="javascript" type="text/javascript" src="exporting.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var data = [];
data.push(['Apples', Math.random()]);
data.push(['Oranges', Math.random()]);
data.push(['Pears', Math.random()]);
data.push(['Grapes', Math.random()]);
data.push(['Bananas', Math.random()]);
series.setData(data);
}, 2000);
}
}
},
title: {
text: '<b>Java小强制作</b>'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: '当前产值'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}]
});
});
</script>
</head>
<body>
<div id="container" style="width: 800px;height: 400px"></div>
</body>
</html>
同样，绘制这个图需要的也是双维数组，我尝试了几个方法，使用 series.setData(data); 可是实现数据的重新指定！
在highcharts.js文件中你可以查看他的一些方法！
请您到ITEYE看我的原创：http://cuisuqiang.iteye.com
或支持我的个人博客，地址：http://www.javacui.com
相关推荐
HighCharts还支持多种高级特性，如数据标签、工具提示、数据列的渐变色、多系列数据、堆叠柱状图等。通过调整配置项，你可以实现丰富的交互效果和视觉表现。 在实际应用中，你可能需要根据需求对数据进行动态加载，...
Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它能够帮助开发者轻松创建各种动态、交互式的图表，包括柱状图、折线图、饼图等多种类型。在本案例中，我们聚焦于"Highcharts柱状图显示"，特别是柱状图...
在本文中，我们将深入探讨如何使用Highcharts来创建柱状图和饼状图，并了解它们的应用场景和配置选项。 **一、柱状图（Bar Chart）** 柱状图是一种常见的统计图表，用于比较不同类别的数值。在Highcharts中，创建...
Highcharts是一款强大的JavaScript图表库，它能够帮助开发者创建各种类型的图表，包括柱状图、折线图、饼图以及我们关注的雷达图等。在Web应用中，雷达图常用于展示多维数据，每个轴代表一个特性或指标，数据点则...
在实际应用中，Highcharts还提供了许多高级特性，如数据动态加载、交互式图表、工具提示、缩放和panning功能等。这些功能使得用户可以更深入地探索数据，从而获得更丰富的洞察。 此外，Highcharts支持响应式设计，...
在"多种曲线图柱状图highcharts"的资源包中，我们可以找到几个关键文件，这些文件将帮助我们理解并应用Highcharts库。 `readme.htm`通常包含项目的基本信息和使用指南，是了解项目的第一步。在这个文件中，你可能会...
它支持多种图表类型，包括折线图、柱状图、饼图、散点图等，且能够轻松实现动态更新，非常适合用于展示实时数据变化。在ASP.NET框架下，Highcharts可以很好地集成到Web应用程序中，为开发者提供了丰富的API和配置...
Highcharts是一款优秀的JavaScript图表库，它支持多种类型的图表，包括折线图、柱状图、饼图、散点图等，同时具备良好的自定义能力和高性能。Highcharts以其简洁的API和丰富的图表样式，深受开发者的喜爱。在与...
总结来说，Highcharts进阶应用涵盖了高级配置、动态数据更新、组合图表、SVG图形定制以及图表导出等多个方面。熟练掌握这些技能，将使你在数据可视化领域更加游刃有余，能够创造出更具吸引力和实用性的图表应用。...
Highcharts是一款强大的JavaScript图表库，用于在Web应用中创建各种数据可视化效果，包括曲线图、柱状图、饼图等。在这个"Highcharts构建曲线图"的实例中，我们将深入探讨如何利用Highcharts来绘制一个基本的曲线图...
它支持各种类型的图表，包括柱状图、折线图、饼图、散点图等，为数据可视化提供了丰富的选择。以下是对Highcharts及其相关知识点的详细说明： 1. **基本概念**：Highcharts是一个基于纯JavaScript的开源图表库，它...
Highcharts还支持动态更新数据，可以通过调用`series.addPoint()`或`chart.update()`方法来实现图表数据的实时变化，这对于监控类应用非常实用。此外，Highcharts还提供了触摸事件和响应式设计的支持，确保在移动...
总之，Highcharts的js文件是构建数据可视化的强大工具，无论是简单的柱状图还是复杂的动态曲线图，都能轻松实现。通过深入理解和灵活运用这些文件，开发者可以提升Web应用的数据展示能力，为用户提供直观易懂的图表...
Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它能够帮助开发者轻松创建出各种美观且功能丰富的图表，包括折线图、柱状图、饼图、散点图等。这款库以其易用性、灵活性和高性能著称，适用于数据可视化的...
在压缩包"饼图以及各种柱状图"中，可能包含了作者自己实现的饼图和柱状图代码，以及一些第三方库的示例。这些资源可以帮助你了解如何在不同的编程环境中创建和自定义这些图表，无论是Python的matplotlib、seaborn，...
Highcharts是一个基于纯JavaScript的图表库，它可以生成线图、柱状图、饼图、散点图等多种图表类型。其优点在于轻量级、易用性高，且支持多种浏览器。Highcharts的图表具有高度定制化，可以调整颜色、样式、数据...
Highstock图表库是Highcharts公司推出的一款专门用于绘制时间序列数据的高级图表工具，尤其适合在网站或应用中展示股票市场、金融数据或其他具有时间维度的数据。它在Highcharts的基础上增加了许多针对时间序列数据...
Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它允许开发者轻松地创建各种类型的交互式图表，如折线图、柱状图、饼图、散点图等，为数据的可视化提供强大支持。这款库以其易用性、灵活性和丰富的功能在...
Highcharts是一个强大的数据可视化工具，广泛用于网页开发，它允许开发者轻松地生成各种类型的图表，如折线图、柱状图、饼图等。 首先，我们要理解Highcharts的基本概念。Highcharts是一个开源的JavaScript库，它...