有沒有辦法使用chart.js繪製浮動矩形

我需要在我的線圖上繪製一個矩形..有人請幫助,,,我想在線圖上繪製一個浮動矩形。矩形的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>

Graph has to look like this

來源

2016-08-18 Bharath Sharma

有一個叫chartjs-插件 - annotation.js爲chart.js之插件（它也可在涼亭https://libraries.io/bower/chartjs-plugin-annotation）

一旦包含js文件，你可以做像這樣：

var myChart = new Chart(document.getElementById("myChart"), { 
    type: 'bubble', 
      data: { 
       datasets:[ 
       ... 
       ] 
      }, 
      options:{ 
      scales: { 
       yAxes: [{ 
        ... 
       }], 
       xAxes: [{ 
        ... 
       }], 
      }, 

     annotation: { 
      annotations: [{ 
      type: 'box', 

      // ID of the X scale to bind onto 
      xScaleID: 'x-axis-0', 

      // ID of the Y scale to bind onto 
      yScaleID: 'y-axis-0', 

      // Left edge of the box. in units along the x axis 
      xMin: 25, 

      // Right edge of the box 
      xMax: 40, 

      // Top edge of the box in units along the y axis 
      yMax: 20, 

      // Bottom edge of the box 
      yMin: 15, 

      // Stroke color 
      borderColor: 'red' 

      // Stroke width 
      borderWidth: 4, 
     }] 
     } 
    }

你會想玩弄列出的設置，但會爲你畫一個矩形。

來源

2017-02-01 23:36:34 Dave

有沒有辦法使用chart.js繪製浮動矩形

回答

相關問題