javascript - OctoberCMS - 如何在 javascript 中提供组件数据

Question

我需要动态填充仪表板主题的数据，但我不确定如何执行此操作。到目前为止，我的代码如下所示。

组件:

public $orders;

public function onRun() {
    $this->orders = $this->loadOrders();
}

protected function loadOrders() {
    $all_customers = Db::table('customers')->get();

    foreach ($all_customers as $customer) {

    }

    $orders = Db::table('orders')->where('company_name', $customer->company_name)->count();

    return $orders;
}

由此，我得到了该客户系统中的订单量，该订单运行良好，但这是我正在努力解决的下一部分。这是我的 JavaScript:

var PIECHART = $('#pieChart');
var orders = ** This is where I am lost **;
var quotes = ** This is where I am lost **;
var invoices = ** This is where I am lost **;
var myPieChart = new Chart(PIECHART, {
    type: 'doughnut',
    data: {
        labels: [
            "Orders",
            "Quotes",
            "Invoices"
        ],
        datasets: [
            {
                data: [orders, quotes, invoices],
                borderWidth: [1, 1, 1],
                backgroundColor: [
                    brandPrimary,
                    "rgba(75,192,192,1)",
                    "#FFCE56"
                ],
                hoverBackgroundColor: [
                    brandPrimary,
                    "rgba(75,192,192,1)",
                    "#FFCE56"
                ]
            }]
    }
});

我很确定解决方案相当简单，但我是个菜鸟:P

Answer 1

我们假设您在页面中直接使用此组件

所以你需要做的就是尝试使用

public function onRun() {
    $this->page['orderCount'] = $this->loadOrders();
}

现在在您的页面中，您需要使该变量可用于 js

<script>
// we don't want to pollute global scope so we add our name space
var myComponent = myComponent || {}
// now we add our value to it 
myComponent['orderCount'] = {{ orderCount }};
</script>

上面的代码将会生成，假设我们得到的计数器是15，那么

myComponent['orderCount'] = 15;

现在在你的 JavaScript 中你可以像这样使用它

var PIECHART = $('#pieChart');
var orders = myComponent['orderCount']; // or myComponent.orderCount
var quotes = ** This is where I am lost **;
var invoices = ** This is where I am lost **;

这对于数字来说效果很好，但如果您还需要将数组共享到 java 脚本，则需要将其转换为 JSON，然后就可以使用它

如果您需要进一步帮助，请告诉我