Question

我正在使用一个简单的Web界面来显示图形实时更新。但是，我只设法显示了一张图。每当我尝试添加另一个图形时，它就会替换第一个图形并且不显示它。任何提示将不胜感激。预先谢谢你。

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" %>

<script runat="server">

    protected void Page_Load(object sender, EventArgs e)
    {

    }
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent1" Runat="Server">
    

    <%-- box and title --%>

    <%--<div class="contentText">
    <p>First, we need some information from you:</p>
    </div>
    <div class="contentText">

       <form id="theForm" action="" method="">
 
<div class="row">
<label for="name">Name:</label>
<input type="text" id="name" name=""> <br> <br>
</div>
 
<div class="row">
<label for="height">Height in inches:</label>
<input type="text" id="height" name=""> <br> <br>
</div>
 
<div class="row">
<label for="weight">Weight in pounds:</label>
<input type="text" id="Weight" name=""> <br> <br>
</div>
 
<div class="row">
<label for="email">Email:</label>
<input type="email" id="email" name="">
</div>
 
</form>

        </div>--%>


    <%-- gauges --%>


    <html>
  <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
            google.charts.load('current', {
        'packages': ['gauge']
      });
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Breathing Rate', 0],
          ['Heart Rate', 0],
          ['Body Temperature', 0]
        ]);

        var options = {
          width: 520,
          height: 200,
          redFrom: 115,
          redTo: 160,
          yellowFrom: 85,
          yellowTo: 115,
          minorTicks: 5,
          max: 150,
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(0, 1, Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 1000);
        setInterval(function() {
          data.setValue(1, 1, Math.round(60 * Math.random()));
          chart.draw(data, options);
         }, 1000);
         setInterval(function() {
          data.setValue(2, 1, Math.round(60 * Math.random()));
          chart.draw(data, options);
          }, 1000);
      }

    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

    <!DOCTYPE HTML>

    <br /> <br /> <br /> <br />

<%-- begin breathing rate graph--%>

<html>
<head>
<script>
window.onload = function () {

var dps = []; // dataPoints
var chart = new CanvasJS.Chart("chartContainer", {
	title :{
		text: "Breathing Rate"
    },
    axisX: {
        title: "Time [s]"
    },
    axisY: {
        title: "BPM",
		includeZero: false
	},      
	data: [{
		type: "line",
		dataPoints: dps
	}]
});

var xVal = 0;
var yVal = 100; 
var updateInterval = 1000;
var dataLength = 20; // number of dataPoints visible at any point

var updateChart = function (count) {

	count = count || 1;

	for (var j = 0; j < count; j++) {
		yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
		dps.push({
			x: xVal,
			y: yVal
		});
		xVal++;
	}

	if (dps.length > dataLength) {
		dps.shift();
	}

	chart.render();
};

updateChart(dataLength);
setInterval(function(){updateChart()}, updateInterval);

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 270px; width: 80%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
    <%-- end breathing rate graph--%>
<br /> <br />

    <%-- begin heart rate graph --%>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {

var dataPoints = [];

var chart = new CanvasJS.Chart("chartContainer", {
	theme: "light2",
	title: {
		text: "Live Data"
	},
	data: [{
		type: "line",
		dataPoints: dataPoints
	}]
});
updateData();

// Initial Values
var xValue = 0;
var yValue = 10;
var newDataCount = 6;

function addData(data) {
	if(newDataCount != 1) {
		$.each(data, function(key, value) {
			dataPoints.push({x: value[0], y: parseInt(value[1])});
			xValue++;
			yValue = parseInt(value[1]);
		});
	} else {
		//dataPoints.shift();
		dataPoints.push({x: data[0][0], y: parseInt(data[0][1])});
		xValue++;
		yValue = parseInt(data[0][1]);
	}
	
	newDataCount = 1;
	chart.render();
	setTimeout(updateData, 1500);
}

function updateData() {
	$.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart="+xValue+"&ystart="+yValue+"&length="+newDataCount+"type=json", addData);
}

}
</script>
</head>
<body>
<div id="chartContainer2" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</body>
</html>


    <%-- end heart rate graph --%>



</asp:Content>

当我运行此代码时，将显示第二张图，但不会显示第一张图。如果我删除第二张图，那么第一张图就很好了。我想同时显示它们（和更多）。

在asp.net网页上加载多个图形

0 个答案: