highchart 动态添加数据
Highcharts是一个制作图表的纯Javascript类库,支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;使用需要导入jquery.js,highcharts.js以及exporting.js，可以通过网站http://www.highcharts.com/下载!
由于很多网站的示例是静态数据,在找了很多资料后,整理了一份如何使用动态数据的代码,分享出共供大家使用!
代码如下：
<html>
<head>
<title>Highcharts Example</title>
<script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/highcharts.js"></script>
<script language="javascript" type="text/javascript" src="js/exporting.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: '每天的分布情况',
x: -20 //center
},
xAxis: {
categories: ['0', '1', '2', '3','4','5','6','7','8','9']
},
yAxis: {
title: {
text: 'Y轴'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>' + this.x +': '+ this.y ;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
}
options.series = new Array();
var i;
for(i=0;i<10;i++)
{
options.series[i] = new Object();
options.series[i].name = 'Sample'+i;
options.series[i].data = new Array(0+i, 1+i, 2+i, 3+i,4+i,5+i,6+i,7+i,8+i,9+i);
}
chart = new Highcharts.Chart(options);
});
</script>
</head>
<body>
<div id="container" style="width: 800px;height: 400px"></div>
</body>
</html>
分享到：
相关推荐
在"highChart后台动态获取数据"这个主题中，我们主要探讨如何利用HighCharts结合后端数据来创建动态图表。 1. **HighCharts基本结构与配置** HighCharts的基本结构包括一个HTML容器元素和JavaScript代码，用于初始...
本教程将探讨如何在Java后端与前端使用Highcharts和Ajax结合，动态地从服务器获取数据并更新图表。 一、Highcharts的基本概念与使用 Highcharts是基于HTML5 SVG的图表库，支持现代浏览器和IE6+（通过VML）。它提供...
4. **数据加载**: 数据可以通过配置对象的`series`属性直接提供，也可以通过异步加载，例如从服务器获取JSON数据后动态添加。 5. **图表属性和选项**：HighChart API提供了大量的配置选项，包括颜色、标题、轴、...
在"Highchart Demo"的源码中，你可能会看到如何设置不同图表的配置，例如调整颜色、改变工具提示样式、添加图例等高级特性。此外，源码还可能展示了如何响应用户交互，如点击图表元素触发事件，或者动态更新图表数据...
1. **HighChart简介**：HighChart是一个基于纯JavaScript的图表库，它允许开发者通过简单的API创建出高质量、动态的数据可视化图表。HighChart支持多种图表类型，如折线图、柱状图、饼图、散点图等，曲线图是其中一...
在实际项目中，HighChart通常与后端服务配合，通过Ajax异步获取数据，动态更新图表。这样，当数据发生变化时，图表会实时更新，提供即时反馈。同时，HighChart还支持导出图表为图片或PDF，方便用户保存和分享。 在...
使用`Highcharts.Chart`方法初始化图表后，可以使用`chart.update()`方法动态更新图表配置，实现数据的实时更新或交互式修改。 10. **响应式设计**： Highcharts支持响应式布局，通过`chart.setSize()`可以调整...
这篇博客可能会讲解如何初始化图表、添加数据系列、响应式设计、事件处理以及与其他前端框架（如React、Vue等）的集成。 标签"源码"暗示了可能有Highcharts的示例代码或者源码解析，这对于我们理解其内部工作原理和...
4. **添加数据系列**：在配置对象中，通过`series`属性添加数据，每个系列可以关联到特定的Y轴，通过`yAxis`属性指定。 5. **实例化图表**：最后，通过`Highcharts.chart()`函数，传入容器ID和配置对象来创建图表。...
例如，通过Ajax获取数据后，可以使用`series.addPoint()`方法动态添加点。 10. **模块（Modules）**：Highcharts提供了多个扩展模块，如Drilldown、Exporting、Map等，它们可以增加更多的功能，通过`require`引入。...
在获取数据后，你需要将这些数据转换为Highcharts可接受的格式，并动态更新图表。可以使用Ajax请求从服务器获取数据，然后在客户端用`Highcharts.series[0].setData()`方法更新数据。 ```javascript $.ajax({ url:...
5. **性能优化**：HighChart采用高效的数据处理和渲染算法，即使在大数据量的情况下也能保持流畅的性能。 6. **多语言支持**：HighChart内置多语言支持，方便全球化的应用需求。 7. **易于集成**：HighChart可以与...
例如，可以使用Ajax获取服务器端数据，并用`Highcharts.Chart`实例的`series.addPoint`方法动态添加数据点。 总的来说，HighChart简单示例提供了一个基础模板，通过这个模板，开发者可以快速掌握HighChart的基本...
总结一下，这个教程将教你如何通过Struts2获取后端数据，利用jQuery的Ajax功能实现远程加载，最后通过HighChart展示动态的折线图。这种方法可以帮助开发者创建出实时更新、用户体验良好的数据可视化工具有，尤其适用...
还可以添加诸如`tooltip`、`navigator`和`scrollbar`等高级功能，增强图表的交互性和可操作性。 Highcharts库提供了丰富的示例，涵盖了各种图表类型和自定义选项的使用，这对于初学者来说是非常有帮助的。这些示例...
对象形式则可以添加额外的信息，如分类名称或数据点的工具提示： ```javascript data: [ {y: 1, name: '数据1'}, {y: 2, name: '数据2', tooltip: '这是数据2的说明'} ] ``` **四、X轴与Y轴** X轴和Y轴可以完全...
将EXTJS与Highcharts整合，能够为Web应用提供动态且交互式的数据展示效果。 首先，我们要理解如何在EXTJS中集成Highcharts。EXTJS中的组件模型允许我们轻松地添加自定义内容，包括图表。以下是一些关键步骤： 1. *...
当添加或更新数据时，可以暂停重绘，直到所有数据处理完毕再一次性更新，这样可以减少频繁的渲染操作。 为了进一步提升用户体验，可以采用延迟渲染或懒加载技术。例如，当用户滚动到图表底部时，再加载更多的数据点...
HighCharts是一款广泛应用于Web开发...总的来说，掌握HighCharts API可以帮助你创建出专业且动态的数据展示，提升项目的数据可视化效果。通过深入学习和实践，你可以充分利用这个强大的工具，满足各种复杂的图表需求。