highcharts 动态指定 x y数据

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<title> test、</title>
		<script type="text/javascript" src="highcharts/jquery.min.js"></script>
		<script type="text/javascript" src="highcharts/highcharts.js"></script>
		<script type="text/javascript" src="highcharts/themes/grid.js"></script>
		<script type="text/javascript">
			
		jQuery(document).ready(function() {
			var options = {
			    chart: {
			        renderTo: 'container',
			        defaultSeriesType: 'line'
			    },
			    title: {
			        text: 'Fruit Consumption'
			    },
			    xAxis: {
			        categories: []
			    },
			    yAxis: {
			        title: {
			            text: 'Units'
			        }
			    },
			    series: []
			};

  var meshu = 10;
   for(var k=0;k<meshu;k++){
   	 //压入横轴名称
		options.xAxis.categories.push("测试"+k);
   //压入数据
		var series = {
		    data: []
		};

		series.name = 'test'+k;
		for(var i=0;i<meshu;i++)
			series.data.push(parseFloat(Math.random()*10000));
		options.series.push(series);
	}
		
    // Create the chart
    var chart = new Highcharts.Chart(options);
	});
		</script>
</head>
<body>
<div id="container"style="width: 100%; height: 450px; margin: 0 auto"></div>	
	</body>
</html>	

示例代码


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 高级图表 Highcharts 可以显示多组数据。你可以通过配置数据数组来添加多个数据系列。例如,下面的代码显示了两个数据系列: ``` Highcharts.chart('container', { title: { text: '多组数据' }, series: [{ name: '数据系列 1', data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5] }, { name: '数据系列 2', data: [5, 3, 4, 2, 1, 3, 1, 5, 4, 2] }] }); ``` 这将在名为“container”的 HTML 元素中显示一个带有两个数据系列的标题为“多组数据”的 Highcharts 图表。第一个数据系列名为“数据系列 1”,其数据为[1, 3, 2, 4, 5, 4, 6, 2, 3, 5],第二个数据系列名为“数据系列 2”,其数据为[5, 3, 4, 2, 1, 3, 1, 5, 4, 2]。 ### 回答2: Highcharts 是一款强大的 JavaScript 图表库,具有创建各种交互式图表的能力。在 Highcharts 中,我们可以很方便地使用多组数据来创建图表。 要创建多组数据的图表,我们需要通过数组来存储每组数据。例如,如果我们要创建一个折线图,可以使用以下代码来定义多组数据: ``` var seriesData = [{ name: '组1', data: [1, 2, 3, 4, 5] }, { name: '组2', data: [2, 4, 6, 8, 10] }, { name: '组3', data: [5, 10, 15, 20, 25] }]; ``` 上述代码中,我们使用了一个包含三个对象的数组 `seriesData`,每个对象包含了组的名称和对应的数据。这样,我们就创建了三组数据,并分别命名为 "组1"、"组2" 和 "组3"。 然后,我们可以使用 Highcharts 提供的API,将这些数据应用到图表中。以下是一个创建折线图的例子: ``` Highcharts.chart('container', { chart: { type: 'line' }, title: { text: '多组数据折线图' }, xAxis: { categories: ['一月', '二月', '三月', '四月', '五月'] }, yAxis: { title: { text: '数' } }, series: seriesData }); ``` 在上述代码中,我们通过设置 `series` 属性来将多组数据应用到图表中。`series` 属性的为之前定义的数组 `seriesData`,这样,图表就会根据每组数据生成对应的折线。同时,我们还可以设置图表的标题、X轴和Y轴的标签等属性,以定制图表的显示效果。 总而言之,通过定义多个数组来存储不同组的数据,并将这些数据应用到 Highcharts 中,我们可以轻松创建多组数据的图表。无论是折线图、柱状图还是饼图,Highcharts 都提供了相应的API和丰富的选项,可根据需求创建各种类型的图表。 ### 回答3: Highcharts 是一个流行的JavaScript 图表库,可以用于在网页上创建多组数据的图表。下面是关于如何使用Highcharts 来展示多组数据的示例: 首先,需要引入Highcharts 库和相关的样式文件到你的网页中。可以通过在`<head>`标签中添加以下代码来实现: ```html <head> <script src="https://cdn.jsdelivr.net/npm/highcharts/highcharts.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highcharts/css/highcharts.css"> </head> ``` 然后,你可以在页面中的 `<div>` 元素中创建一个容器来显示你的图表,如下所示: ```html <div id="container"></div> ``` 接下来,你需要使用JavaScript代码来定义你的图表数据。你可以创建一个数组来存储多组数据,然后在Highcharts的配置中使用这些数据。下面是一个简单的示例: ```javascript var data1 = [1, 2, 3, 4, 5]; var data2 = [6, 7, 8, 9, 10]; Highcharts.chart('container', { title: { text: '多组数据示例' }, series: [{ name: '数据1', data: data1 }, { name: '数据2', data: data2 }] }); ``` 在上面的示例中,我们定义了两个数据数组 `data1` 和 `data2`,然后在 `series` 配置中分别指定了这两个数据的名称和。 最后,你可以根据你的需求配置图表的其他属性,如标题、图例、坐标轴、样式等。 通过以上步骤,你就可以在网页中使用Highcharts来展示多组数据的图表了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值