2016-08-27 10 views
0

canvas.jsを使って二重線でグラフを描くには?

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

私はcanvas.jsでいくつかのコードを持っているが、私は例の5倍+ 6Y = 0の方程式に基づいて、二重の時間グラフでグラフを描きたい。8倍速+ 5Y = 0式タイプグラフを描くための入力である。私はcanvas.jsをプログラミングする方法の例のモデルグラフに基づいて1つのモデルグラフを追加しました。

答えて

0

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> 
 
\t <script type="text/javascript"> 
 
\t \t window.onload = function() { 
 
\t \t \t var chart = new CanvasJS.Chart("chartContainer", { 
 
\t \t \t \t title: { 
 
\t \t \t \t \t text: "Basic Spline Chart" 
 
\t \t \t \t }, 
 
\t \t 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} 
 
     
 
     ] 
 
     } 
 
     ] 
 
\t \t \t 
 
\t \t \t }); 
 
\t \t \t chart.render(); 
 
\t \t } 
 
\t </script> 
 
\t 
 
\t 
 
</head> 
 

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

 
</html>

I canvas.jsを使用して二重線でグラフを描画するためにどのように私の質問? Ans:アレイポイントに基づいてグラフをプロットするために私の質問に配列関数を追加するだけです。

関連する問題