如何从 Vue.Js 中的变量向数组添加值以制作条形图

Posted 2023-02-22

【中文标题】如何从 Vue.Js 中的变量向数组添加值以制作条形图

【英文标题】：How to add values to an array from variables in Vue.Js to make bar chart

【发布时间】：2019-11-06 11:24:29

【问题描述】：

我正在尝试添加存储在变量中的值，以添加到数组中以在 Vue.js 中显示为条形图

我尝试使用 series[0]=ServiceArea1; 添加值。

这是我目前得到的：

barChart: 
    data: 
        series [0] : ServiceArea1Total,
        series [1] : ServiceArea2Total,                    
        series [2] : ServiceArea3Total,
        series [3] : ServiceArea4Total,
        series [4] : ServiceArea5Total,
        labels: ['Western', 'Northern', 'Eastern', 'Southern', 'Central'],
        series: [ ]                
    

如果我输入这样的值

series: [[542, 443, 320, 780, 553],]

但是由于我从数据库中调用值，所以输出来了，我不能静态输入值。

html部分如下：

<div class="row">
                <div class="col-md-6">
                    <chart-card :chart-data="barChart.data"
                                :chart-options="barChart.options"
                                :chart-responsive-options="barChart.responsiveOptions"
                                chart-type="Bar">
                        <template slot="header">
                            <h4 class="card-title">Statewide Service Area Kids</h4>
                            <p class="card-category">Click on a service area to view more information</p>
                        </template>
                        <template slot="footer">
                            <div class="legend">
                                <i class="fa fa-circle text-info"></i> Service Area

                            </div>
                            <hr>
                            <div class="stats">
                                <i class="fa fa-check"></i> Data information certified
                            </div>
                        </template>
                    </chart-card>
                </div>

【问题讨论】：

你能找到修复你的缩进，因为你的 barChart ... 不容易阅读，我不确定你没有错别字，你需要添加“， " 在系列 [0] 之后：ServiceArea1Total

感谢修复，你能告诉我系列 [0] 是否是你的数组系列的第一项吗？

@ibeefymcwhatnow 你是如何得到这些ServiceAreaTotal 变量的？...你能告诉我们你的数据库GET 请求吗！因为变量应该在请求后立即绑定到您的数据数组

@BenoitChassignol 是的，我希望将 ServiceArea1Total 保存在数组的第一个位置，因此 series[0]=: ServiceArea1Total

@ibeefymcwhatnow，你看下面我的答案了吗？我解释了如何在 series[] 中插入请求/函数 ServiceArea1Total 的结果，我只是认为您在创建数据模型 barChart 时犯了一个错误，请看下面并告诉我您是否可以将其调整为您的代码。跨度>

【参考方案1】：

这取决于数据从数据库返回时的结构。在最基本的情况下，您将遍历数据库中的数组或对象，并为每个元素调用 Array.push。例如：series.push(x)

这可能会有所帮助：

How do I push items into an array in the data object in Vuejs? Vue seems not to be watching the .push() method

【讨论】：

这些值以整数形式存储在 ServiceArea1Total、ServiceArea2Total.....ServiceArea5Total 变量中。我只需要找到一种方法将它们插入数组

【参考方案2】：

假设您有这样的模型：

let barChart = 
  services: [
    ServiceArea1Total,
    ServiceArea2Total,                    
    ServiceArea3Total,
    ServiceArea4Total,
    ServiceArea5Total,
  ],
  labels: ['Western', 'Northern', 'Eastern', 'Southern', 'Central'],
  series: []

您将您的服务调用存储在barChart.services，您的标签存储在barChart.labels（此处未使用），您的全部系列存储在barChart.series。 要从您的服务中获取所有数据并将其存储在 barChart.series 中，您必须执行以下操作：

barChart.services.forEach( function( service )
    barChart.series.push( service() );
);

使用该代码，您将调用服务中的所有函数，并为每个函数推送数组系列中的数据。

我想念你想做什么？

【讨论】：

我尝试将服务函数放入其中，但它给了我“barChart.data.services.forEach(function (service)”的错误。我将函数放在您在下面编写的数组代码之后谢谢你尝试了但是我意识到之前没有正确解释这个问题，所以请在问题中找到 HTML 部分。

能否给出错误日志？我已经更新了我的答案，我在以前的版本中引入了一个错误。