Marionette应用程序上的Highchart.Chart()

Question

我是Highcharts.js和Marionette.js的新手，

任务：

我尝试创建两个Marionette应用程序，这样每个应用程序都会存储一个Highcharts.Chart()，这样这两个Chart()每次都会出现在相同的区域上。

实施：

所以我的总体想法是这样的——

让Graph1Manager成为第一个Marionette应用程序-

var Graph1Manager = new Marionette.Application()

CCD_ 9是CCD_

<div id="main-region" class="container"> Here would be a chart </div>

对于Graph1Manager，我实现了-

Graph1Manager.on("initialize:after", function () {...})

使得CCD_ 12加载第一个CCD_ 13所需的所有数据一次。

所以我的问题是：

我必须在哪里以及如何在Graph1Manager上存储和绘制Chart()？

它必须在任何Marionette.ItemView.extend中吗？

Answer 1

我之前使用Marionette和Highcharts构建了一个应用程序，所以我认为我可以从一些经验中了解这一点。

有不止一种方法可以做到这一点，但总的来说，除非你有特殊原因，否则你只想运行一个Marionette应用程序。我不知道你是否试图在同一区域同时显示两个视图，但如果你是这样，这肯定是不可能的——一旦你显示了第二个视图，第一个视图就会从dom中删除。

无论如何，回答您的问题：最简单的方法(也是我做这件事的方法)是使用ItemView并在onRender()方法中绘制图表。所以它看起来像这样：

var MyView = Marionette.ItemView.extend({
template: _.template('<div class="chart-container" style="height: 325px;"></div>'),
onRender: function() {
this.$('.chart-container').highcharts({
...highcharts options here
})
}
});

然后，当你准备好显示它时，你会创建一个实例并在区域中显示它：

var view = new MyView();
Graph1Manager.nameOfRegion.show(view);

每当你在区域中显示另一个视图时，上一个视图都会自动关闭，所以请记住，如果你想再次使用它，你必须创建一个新的实例。。。