1
私は線グラフ上に長方形をプロットする必要があります。誰かが助けてください,,,私は線グラフ上に浮遊矩形を描画したいと思います。矩形のxy座標は動的である&は、配列の作成方法と同様に変数として渡されます。chart.jsを使用してフローティング矩形を描く方法はありますか
<html>
<head>
<title>Line Chart</title>
<script src="Chart.js"></script>
<meta http-equiv="refresh" content="1"/>
</head>
<body>
<div style="width: 60%">
<canvas id="mycanvas" height="300" width="750" class="subcanvas"> </canvas>
</div>
<script>
var chrt1 = document.getElementById("mycanvas").getContext("2d");
chrt1.beginPath();
chrt1.lineWidth="20";
chrt1.strokeStyle="red";
chrt1.rect(200,200,50,50);
chrt1.stroke();
var lineOptions = {
animation:false,
pointDotRadius: 0,
responsive: false
};
var mmaxis = [];
var loadaxis = [];
mmaxis[0] = :="plotdb".xarray[0]:
mmaxis[1] = :="plotdb".xarray[1]:
mmaxis[2] = :="plotdb".xarray[2]:
mmaxis[3] = :="plotdb".xarray[3]:
mmaxis[4] = :="plotdb".xarray[4]:
mmaxis[5] = :="plotdb".xarray[5]:
mmaxis[6] = :="plotdb".xarray[6]:
mmaxis[7] = :="plotdb".xarray[7]:
mmaxis[8] = :="plotdb".xarray[8]:
mmaxis[9] = :="plotdb".xarray[9]:
mmaxis[10] = :="plotdb".xarray[10]:
mmaxis[11] = :="plotdb".xarray[11]:
mmaxis[12] = :="plotdb".xarray[12]:
mmaxis[13] = :="plotdb".xarray[13]:
mmaxis[14] = :="plotdb".xarray[14]:
mmaxis[15] = :="plotdb".xarray[15]:
mmaxis[16] = :="plotdb".xarray[16]:
mmaxis[17] = :="plotdb".xarray[17]:
mmaxis[18] = :="plotdb".xarray[18]:
mmaxis[19] = :="plotdb".xarray[19]:
mmaxis[20] = :="plotdb".xarray[20]:
loadaxis[0] = :="plotdb".yarray[0]:
loadaxis[1] = :="plotdb".yarray[1]:
loadaxis[2] = :="plotdb".yarray[2]:
loadaxis[3] = :="plotdb".yarray[3]:
loadaxis[4] = :="plotdb".yarray[4]:
loadaxis[5] = :="plotdb".yarray[5]:
loadaxis[6] = :="plotdb".yarray[6]:
loadaxis[7] = :="plotdb".yarray[7]:
loadaxis[8] = :="plotdb".yarray[8]:
loadaxis[9] = :="plotdb".yarray[9]:
loadaxis[10] = :="plotdb".yarray[10]:
loadaxis[11] = :="plotdb".yarray[11]:
loadaxis[12] = :="plotdb".yarray[12]:
loadaxis[13] = :="plotdb".yarray[13]:
loadaxis[14] = :="plotdb".yarray[14]:
loadaxis[15] = :="plotdb".yarray[15]:
loadaxis[16] = :="plotdb".yarray[16]:
loadaxis[17] = :="plotdb".yarray[17]:
loadaxis[18] = :="plotdb".yarray[18]:
loadaxis[19] = :="plotdb".yarray[19]:
loadaxis[20] = :="plotdb".yarray[20]:
var lineChartData = {
labels :mmaxis,
datasets : [
{
label: "Load Vs Disp",
fillColor : "rgba(255,255,255,0.2)",
strokeColor : "rgba(10,10,10,1)",
pointColor : "rgba(0,0,0,1)",
pointStrokeColor : "#0",
pointHighlightFill : "#0",
pointHighlightStroke : "rgba(0,0,0,10)",
data :loadaxis
}
]
}
window.onload = function()
{
window.chrt1
var chrt = document.getElementById("mycanvas").getContext("2d");
window.myFirstChart = new Chart(chrt).Line(lineChartData,lineOptions);
}
</script>
</body>
</html>
