1

デフォルトの Ember を使用して Highcharts を統合する方法を詳しく説明しているこの最近の記事を見つけました。この同じトピックに関する別の 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" }}

(これは私の /accounts/index テンプレートに配置されます)

HighChartsView のパスが見つからないため、Assertion Failed エラーが発生しました。

ファイルに正しく名前を付けていないか、ファイルを正しいディレクトリに配置しておらず、リゾルバーがそれらを正しくコンパイルしていないと思いますか? 私が見つけたブログ投稿もあまり冗長ではないという問題もあります。そのため、何が起こっているべきか/すべきでないかを理解するためのコンテキストがあまりありません...

4

1 に答える 1