在 vue-chartjs 中循环遍历数组

Posted 2023-02-22

【中文标题】在 vue-chartjs 中循环遍历数组

【英文标题】：Loop through array in vue-chartjs

【发布时间】：2019-09-04 04:32:40

【问题描述】：

我正在使用 Laravel 5.7 并且一直在使用 vue-chartjs。

预期结果：

我想将一个数组传递给Vue并循环遍历特定值以动态创建图表。

我一直在尝试的：

我有以下数组：

0 => array:4 [▼
  "order_date" => "2019-04-01"
  "days_remaining" => 29
  "cash_remaining" => 26714.63
  "ratio" => "1.11"
]
1 => array:4 [▼
  "order_date" => "2019-04-02"
  "days_remaining" => 28
  "cash_remaining" => 26184.61
  "ratio" => "1.41"
]

我正在使用刀片中的 :bind shorthand 将数组传递给我的 Vue 组件。

:chart-data=" json_encode($array) "

我正在阅读有关 using a sequential for loop 的信息，但每当我尝试添加 for 循环时，都会收到 Uncaught Error: Module build failed: SyntaxError: Unexpected token (19:11) 错误。

<script>
import  Line  from 'vue-chartjs' 

export default 
  extends: Line,
  props: ['chartData'],

  mounted() 
    console.log(this.chartData); // This works
    var length = this.chartData.length; // So does this

    this.renderChart(
      labels: ['Ratio Value'],

      // This produces the error listed above
      for ( var i = 0; i < length; i++ )
      
        console.log(chartData[i]);
      

      datasets: [
        // I want to dynamically produce the following
        
          label: [chartData.order_date],
          data: chartData.ratio
        
      ]
    )
  

</script>

数组长度恒定为 5，因此我可以将它们的值存储在刀片模板中的隐藏输入中并使用 document.querySelector，但这似乎很笨重，不是最佳路线。

任何建议将不胜感激！

【问题讨论】：

为什么不在mounted() 中循环this.cartData？我在这里没有看到问题。

嘿@Camilo，首先，感谢您的回复。这就是我苦苦挣扎的地方 - 我知道我 需要 循环遍历数组，我只是不确定 如何 这样做。您可以发布一个显示示例的答案吗？我是 php / Laravel 人 - JS 不是我的强项。

您链接的问题回答了该问题，您应该尝试在您的 mounted() 函数中使用 for()。

Loop through an array in javascript的可能重复

@Camilo - 如果它回答了我不会问的问题。每当我回答关于 SO 的问题时，我通常都会举一个例子，以便人们学习。这不是网站的全部意义吗？分享知识？

【参考方案1】：

将您的for() 移出renderChart() 呼叫：

import  Line  from 'vue-chartjs'

export default 
  extends: Line,
  props: ['chartData'],

  mounted() 
    var length = this.chartData.length;
    var array = this.chartData;

    // Create new arrays to store the data
    var ratioArray = [];
    var labelsArray = [];

    for ( var i = 0; i < length; i++ ) 
      // Then push our data to the new arrays
      labelsArray.push(array[i] ? array[i].order_date : '');
      ratioArray.push(array[i] ? array[i].mbr : '');
    

   this.renderChart(
      labels: labelsArray, // Reference our new labelsArray
      datasets: [
        
          label: 'Ratio',
          data: ratioArray, // And our new ratioArray
        
      ]
    )
  

initializing objects时不能调用函数。

【讨论】：

我会将此答案标记为已接受，因为您帮助我指明了正确的道路。我对其进行了编辑以包含组件 re: 将数据推送到新数组。非常感谢您今天的宝贵时间，非常感谢！