如何整合amcharts和Ember.js?

时间:2014-07-04 14:39:04

标签: ember.js

我正在尝试整合ember.js和amcharts。我根据实时图表编辑器(http://pastebin.com/XWVWkhJk

中的代码创建了以下视图
App.AmchartView = Ember.View.extend
    classNames: ['amcharts']
    series: []
    config: {}

    didInsertElement: ->
        @renderGraph()

    renderGraph: (->
        AmCharts.makeChart @get('elementId'),
            type: "serial"
            pathToImages: "http://cdn.amcharts.com/lib/3/images/"
            categoryField: "date"
            dataDateFormat: "YYYY-MM-DD"
            categoryAxis:
                parseDates: true
            chartCursor: {}
            chartScrollbar: {}
            trendLines: []
            graphs: [
                {
                    bullet: "round"
                    id: "AmGraph-1"
                    title: "graph 1"
                    valueField: "column-1"
                }
                {
                    bullet: "square"
                    id: "AmGraph-2"
                    title: "graph 2"
                    valueField: "column-2"
                }
            ]
            guides: []
            valueAxes: [
                id: "ValueAxis-1"
                title: "Axis title"
            ]
            allLabels: []
            balloon: {}
            legend:
                useGraphSettings: true

            titles: [
                id: "Title-1"
                size: 15
                text: "Chart Title"
            ]
            dataProvider: [
                {
                    date: "2014-03-01"
                    "column-1": 8
                    "column-2": 5
                }
                {
                    date: "2014-03-02"
                    "column-1": 6
                    "column-2": 7
                }
                {
                    date: "2014-03-03"
                    "column-1": 2
                    "column-2": 3
                }
                {
                    date: "2014-03-04"
                    "column-1": 1
                    "column-2": 3
                }
                {
                    date: "2014-03-05"
                    "column-1": 2
                    "column-2": 1
                }
                {
                    date: "2014-03-06"
                    "column-1": 3
                    "column-2": 2
                }
                {
                    date: "2014-03-07"
                    "column-1": 6
                    "column-2": 8
                }
            ]
    ).observes('series', 'config')

在视图中我可以看到amcharts div,但图形不是渲染。怎么了?我有<link>标记中包含的所有amcharts文件,并且浏览器控制台中没有任何错误。

1 个答案:

答案 0 :(得分:2)

这里有一些你可能会遗漏的东西。如果您包含jsbin或jsfiddle而不仅仅是视图文件,那么猜测可能出现的问题会更容易。

首先,我不知道你的模板文件是什么样的,所以我不知道你是如何注入这个图表的。

我已经能够使用this jsbin中的Ember视图成功制作amchart。

如果您可以发布更多代码,我很乐意帮助找出出错的地方,我知道应该更多地展示原因而不是如何,但这里的信息不足。< / p>