Интеграция Highcharts в Ember Application

Question

Я нашел эту недавнюю статью, в которой подробно рассказывается, как интегрировать Highcharts, используя Ember по умолчанию. Я понимаю, что есть еще один SO-пост на эту же тему, однако это делается и в Ember по умолчанию.

Я пытаюсь изменить этот код для работы в Ember App Kit и / или Ember-CLI

Основываясь на посте, я использовал следующий код:

Многоразовый вид

HighChartsView = Ember.View.extend
  tagName: 'div'
  classNames: [ 'highcharts' ]
  chartConfig = {}

  setConfig: (type)->
    config = {
      chart:
        type: type
      title:
        text: @title || 'Highcharts'
      xAxis:
        categories: @dataset.categories || []
      yAxis:
        title:
          text: @yAxisTitle
      series: @series()
    }
    # Merge highcharts config if it is present
    Ember.merge(config, @highChartConfig) if @highChartConfig
    @set('chartConfig', config)

  series: ->
    @dataset.data

  prepareConfig: ->
    # if custom config is present then directly set it to chartConfig
    if @customHighChartConfig
      @set('chartConfig', @customHighChartConfig)
    else
      type = @type || 'line'
      @setConfig(type)

  didInsertElement: ->
    @prepareConfig()
    @renderHighchart()

  renderHighchart: ->
    @$().highcharts(@chartConfig)

`export default HighChartsView`

(этот файл сохраняется в моей папке корневых представлений как high-charts-view.coffee)

Данные диаграммы:

dashData = Ember.ArrayController.extend
  dataset: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    data: [{
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
      name: 'New York',
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }, {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    }, {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]
  }

`export default dashData`

(этот код является контроллером индекса, но я не знаю, где его разместить... но я предполагаю, что он должен быть относительно фактической страницы, на которой будет отображаться диаграмма? т.е. контроллер / счета / индекс)

В примере также определяется отдельный контроллер индекса

App.IndexController = Ember.ArrayController.extend
    highChartConfig: {
      yAxis: {
        title: {
            text: 'Temperature (°C)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
      },
      tooltip: {
          valueSuffix: '°C'
        }
      }

(который я также предполагаю, должен быть частью того же контроллера индекса, показанного выше?)

Чтобы вызвать представление в шаблоне:

{{ view HighChartsView dataset=dataset highChartConfig=highChartConfig title="Sample Analytics" type="line" }}

(Это помещено в мой / счета / шаблон индекса)

Я столкнулся с ошибками Assertion Failed, потому что он не может найти путь HighChartsView.

Я предполагаю, что я не назвал свои файлы правильно, или не поместил файлы в правильную директорию, и распознаватель не компилирует их правильно? Существует также проблема в том, что найденная мною запись в блоге также не очень многословна, поэтому нет большого контекста, чтобы попытаться выяснить, что должно / не должно происходить...

Answer 1

k, так что в этом случае я бы сказал, что есть несколько вещей, которые вы можете изменить, во-первых, представления должны быть в кавычках,

  {{view 'HighCharts' dataset=dataset highChartConfig=highChartConfig title="Sample Analytics" type="line" }}

во-вторых, оба этих набора данных выглядят так, как будто они должны быть частью модели, возвращаемой с маршрута.

Давайте просто сделаем все это из приложения route / controller / template для начинающих.

Маршруты, они используются для управления состоянием, http://emberjs.com/guides/routing/

var ApplicationRoute = Ember.Route.extend({
  model: function(){
    return {
      dataSet: this.dataSet,
      highChartConfig: this.highChartConfig
    }
  },
  dataSet:{},
  highChartConfig:{}
});

Контроллеры, используемые для украшения модели и / или логики для шаблона. Ember Handlebars не автоматически помещают модель в область видимости

var ApplicationController = Ember.ObjectController.extend();