Question

首先，我要感谢大家的帮助。之前我在另一个主题中问过，如何在chart.js创建的图表中插入变量的内容。

我知道“ view”（EJS）文件有点混乱，但是我创建了一个“ for”循环来查看该文件是否正在从数据库接收数组（通过路由传递），它是（它会打印出11,10,20）-我只是为了确定这一点。

问题是，正在绘制图形，但信息（来自3元素数组）未在图表中打印。难道我忘了做任何额外的步骤吗？

查看文件（.ejs）：

private void Canvas_MouseWheel(object sender, MouseWheelEventArgs e)
{
    var transform = (MatrixTransform)Resources["GeometryTransform"];
    var matrix = transform.Matrix;
    var scale = e.Delta > 0 ? 1.1 : 1 / 1.1;
    var pos = e.GetPosition((IInputElement)sender);
    matrix.ScaleAt(scale, scale, pos.X, pos.Y);
    transform.Matrix = matrix;
}

路线：

<!DOCTYPE html>
<html>
<head>
  <!-- Plotly.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>

<body>
<% if(barras){ %>
  <ul>
    <% for (var i = 0; i < barras.length; i++) { %>
      <li>
        <%= JSON.parse(barras[i].progresso) %>
      </li>
    <%}%>
  </ul>
<% } %>
<canvas id="myChart"></canvas>
  <div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
  <% if(barras){ %>
          var barras = [];
          <% for (var i = 0; i < barras.length; i++){ %>
              barras = barras + <%= JSON.parse(barras[i].progresso)%> + ","  ;     
          <%}%>
  <% } %>
  var progresso = barras.substring(barras, barras.length -1);
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'horizontalBar',

    // The data for our dataset
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: progresso.parse,
        }]
    },

    // Configuration options go here
    options: {}
});
  </script>
</body>
</html>

我仍然对仅使图表起作用的工作量感到困惑。我也尝试了Plotly框架，它也没有捕获数组中的值。

顺便说一句，从数据库返回的是RowDataPacket ...

使用node.js变量的Chart.JS

0 个答案: