Question

我需要在线图上绘制一个矩形..有人请帮助,,,我想在折线图上绘制一个浮动矩形。矩形的xy坐标是动态的＆amp;将作为变量传递，就像下面创建数组一样。

<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

Answer 1

有一个名为chartjs-plugin-annotation.js的chart.js插件（它也可以在bower 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,
         }]
      }
   }

您需要使用其中列出的设置，但会为您绘制一个矩形。

有没有办法使用chart.js绘制浮动矩形

1 个答案: