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，然后才能使用它

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