Javascript 如何将主干中的[object]转换为实际数据

我的主干视图（file.js）中有一个函数，其中填充了以下格式的JSON响应：-

主干视图中的功能：-

chart_data: function(){
    var all_stats = this.collection.toJSON();
    $("#page-container").html(this.users_by_loc({
        platform_stats: all_stats,
        graph_data: all_stats.items.slice(0,5) 
        // I want to use the top 5 entries to plot graph
    }));
}

响应作为所有统计数据的一部分出现（来自我的api调用-我在服务器端使用Rails）：-

现在，我正试图将graph_data参数中的json响应（在上面的主干视图中定义）传递给一个名为chartData的变量，该变量在我的jst.ejs模板中定义（下面的代码）。我的AM charts JS代码使用这个变量（chartData）来实际绘制图形

Myjst.ejs文件包含填充图形数据和绘制图形的代码，如下所示：-

<script>
    var chart;  

    chartData = "<%= graph_data %>"    
    console.log("chartData: ", chartData);

            AmCharts.ready(function () {
                // SERIAL CHART
                chart = new AmCharts.AmSerialChart();
                chart.dataProvider = chartData;

                //additional code to help plot the chart  

                chart.write("chartdiv");
            });

</script>

<div id="chartdiv" style="width: 60%; height: 400px;"></div>

如何将graph_data变量中存在的实际数据（作为我的主干视图的一部分）正确分配给myjst.ejs模板中存在的变量chartData以绘制图形？

将“真实”JavaScript代码与模板混合在一起（也就是说，将

扔进模板，而不是简单的JavaScript片段来组合模板）通常不会有那么好的效果。如果你将关注点分开，你通常会有一个更轻松的时间：HTML语言的东西放在模板中，功能在视图中连接

我对amChart不太熟悉，但对很多制图（和绘图）很熟悉图书馆在做任何工作之前，需要了解有关目标元素的一些重要信息。特别是，他们通常想知道它在页面上的位置以及它的大小，而这些信息只有在

呈现到页面上后才能知道。在主干应用程序中，通常只有在有人进行

渲染后才会知道er

ed一个视图并将其

el

附加到页面：

var v = new View;
// We don't know the position or size of anything yet.
v.render();
// We still don't know.
$('body').append(v.el);
// Now the size and position are available but we might have to
// pass control back to the browser first.

您面临的另一个困难是，amChart显然想要DOM中某个东西的

id

，而它应该将其引入：

chart.write("chartdiv");

但是

document.getElementById（'chartdiv'）

在调用

render

之后，以及在某人执行

x.append（v.el）

之后，才会返回任何有用的内容

如果您希望有人在调用

render

后立即将视图的

el

放到页面上，那么您可以将一些代码排队，以便在浏览器重新获得控制权后运行（从而有时间计算事物的大小和位置，并使

document.getElementById（'chartdiv'）

做一些有用的事情）通过使用：

如果您想更明确一点，还可以使用（比

setTimeout（…，1）多一点）

可能会有一些特定于阿姆查特的东西需要处理，但希望这能解决困难的部分

---

顺便说一句，您在评论中提到的

AmCharts.ready

调用可能对单页应用程序不起作用，因为它可能相当于

$（document）.ready（）

，并且只有在加载页面时才会触发（即在单页应用程序的持续时间内仅触发一次）。您可能可以使用其他事件，但您应该能够使用现有的主干视图结构，而不是依赖文档就绪事件。

为什么您要在模板内部使用

？为什么不使用JavaScript中的JavaScript？@muistooshort:我想您有一个很好的观点，我之前没有想到这一点。比如说我在主干视图（js文件）中自己编写绘制图表的逻辑，我只需要在主干模板（jst.ejs文件）中编写

这行得通吗？可能。你只需要在正确的时间调用主干视图中的图表内容。@muistooshort:我正在尝试，但我现在面临的问题是

chart.write（“chartdiv”）

在我的主干视图中显示不识别模板中的

chartdiv

。我是否可以将数据作为AM charts函数2的一部分分配给

图表。dataProvider

属性n实现剩余内容2在我的jst.ejs模板中绘制图表？如果是，我如何传递我正在处理的对象hin my AM charts用作模板的参数，以便我以后可以使用它绘制二维图形。通过这种方法，chartdiv将被识别为模板中的绘图逻辑的一部分。如果调用者要立即将视图放入DOM，请查看信息或。

chartData: [object Object],[object Object],[object Object],[object Object],[object Object]

var v = new View;
// We don't know the position or size of anything yet.
v.render();
// We still don't know.
$('body').append(v.el);
// Now the size and position are available but we might have to
// pass control back to the browser first.

chart.write("chartdiv");

render: function() {
    var _this = this;
    var chartData = ....

    // Do normal rendering and template stuff.

    setTimeout(function() {
        var chart = new AmCharts.AmSerialChart();
        chart.dataProvider = chartData;
        //...
        chart.write("chartdiv");
    }, 0);
    return this;
}