Question

我正在尝试学习chart.js。所以我试图制作一张图表来测试chart.js。

当我直接在chart.js数据中定义标签时，一切工作正常。但是，当我尝试从mongodb检索数据，将其传递到index.ejs，然后在脚本中替换标签和数据的地方时，此方法不起作用。

此外，当我通过直接提供一些标签（而不是从nodejs收到的标签）并使用从nodejs收到的数据来替换标签时，它可以工作。（注意：在架构中，国家/地区为字符串类型，值为数字类型。）

app.js，index.ejs和输出的代码如下。

谢谢！

app.js代码：

app.get('/', async function (req, res) {

  var countryArr = [];
  var valuesArr = [];

  var getCountry = data.find({}).select('country -_id');
  var getValues = data.find({}).select('value -_id');

  getCountry.exec(function(err, x){
    for(var i = 0; i < x.length; i++){
      countryArr.push(x[i].country);
    }
    console.log(countryArr);
    getValues.exec(function(err, x){
      for(var i = 0; i < x.length; i++){
        valuesArr.push(x[i].value);
      }
      console.log(valuesArr);
      res.render('index',{
        country : countryArr,
        value : valuesArr
      });
    });
  });
});

index.ejs

<body>
  <p>
    <%= country %>
  </p>
  <p>
    <%= value %>
  </p>
  <div class="container">
    <canvas id="myChart" style="width: 100px; height=100px"></canvas>
  </div>
  <script>
    var ctx = document.getElementById("myChart");
    console.log(country[0].toString());
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: [<%= value %>],
        datasets: [{
          label: '#',
          data: [<%= value %>],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
  </script>
</body>

Browser Output

Answer 1

我发现我要去哪里错了。

在index.ejs中，代替这个...

var smoothScroll = function(elementId) {
  var MIN_PIXELS_PER_STEP = 16;
  var MAX_SCROLL_STEPS = 30;
  var target = document.getElementById(elementId);
  var scrollContainer = target;
  do {
    scrollContainer = scrollContainer.parentNode;
    if (!scrollContainer) return;
    scrollContainer.scrollTop += 1;
  } while (scrollContainer.scrollTop === 0);

  var targetY = 0;
  do {
    if (target === scrollContainer) break;
    targetY += target.offsetTop;
  } while (target = target.offsetParent);

  var pixelsPerStep = Math.max(MIN_PIXELS_PER_STEP,
    Math.abs(targetY - scrollContainer.scrollTop) / MAX_SCROLL_STEPS);

  var isUp = targetY < scrollContainer.scrollTop;

  var stepFunc = function() {
    if (isUp) {
      scrollContainer.scrollTop = Math.max(targetY, scrollContainer.scrollTop - pixelsPerStep);
      if (scrollContainer.scrollTop <= targetY) {
        return;
      }
    } else {
        scrollContainer.scrollTop = Math.min(targetY, scrollContainer.scrollTop + pixelsPerStep);

      if (scrollContainer.scrollTop >= targetY) {
        return;
      }
    }

    window.requestAnimationFrame(stepFunc);
  };

  window.requestAnimationFrame(stepFunc);
};

应该是...

labels: [<%= value %>],

基本上，我从app.js接收到的数组是[abc，xyz，pqr]。因此，要将其转换为类似['abc'，'xyz'，'pqr']的字符串数组，我们必须使用JSON.stringify（）

无论如何，谢谢大家！

从节点js到ejs获取字符串数组

1 个答案: