如何使用canvas.js以双线绘制图形?

时间:2016-08-27 07:52:23

标签: javascript html canvas



<!DOCTYPE HTML>
<html>
<head>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function() {
		var chart = new CanvasJS.Chart("chartContainer", {
			title: {
				text: "Line Chart"
			},
			axisX: {
				interval: 10
			},
			data: [{
				type: "line",
				dataPoints: [
				  { x: 10, y: 35 },
				  { x: 20, y: 14 },
				  { x: 30, y: 20 },
				  { x: 40, y: 60 },
				  { x: 50, y: 50 },
				  { x: 60, y: 80 },
				  { x: 70, y: 40 },
				  { x: 80, y: 60 },
				  { x: 90, y: 10 },
				  { x: 100, y: 50 },
				  { x: 110, y: 40 },
				  { x: 120, y: 14 },
				  { x: 130, y: 70 },
				  { x: 140, y: 40 },
				  { x: 150, y: 90 },
				]
			}]
		});
		chart.render();
	}
	
	</script>
	
</head>
<body>
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
</body>
</html>
&#13;
&#13;
&#13;

我在canvas.js中有一些代码,但是我想在双时间图中绘制基于等式的图形,例如5x + 6y = 0; 8x + 5y = 0输入中的等式类型绘制图形。我添加了一个基于示例模型图的示例模型图,如何编写canvas.js请帮帮我。

1 个答案:

答案 0 :(得分:0)

<!DOCTYPE HTML>
<html>
<head>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>  
	<script type="text/javascript">
		window.onload = function () {
			var chart = new CanvasJS.Chart("chartContainer", {
				title: {
					text: "Basic Spline Chart"
				},
		data: [
      {        
        type: "spline",
        dataPoints: [
        { x: 10, y: 10 },
        { x: 20, y: 25},
        { x: 30, y: 20 },
        { x: 40, y: 25 },
        { x: 50, y: 27 },
        { x: 60, y: 28 },
        { x: 70, y: 28 },
        { x: 80, y: -24 },
        { x: 90, y: 26}
      
        ]
      },
        {        
        type: "spline",
        dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55},
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14}
      
        ]
      }
      ]
			
			});
			chart.render();
		}
	</script>
	
	
</head>

<body>
	<div id="chartContainer" style="height: 400px; width: 100%;"></div>
</body>

</html>

我的问题是如何使用canvas.js以双线绘制图形? Ans:只在我的问题中添加数组函数,根据数组点绘制图形。