@amcharts/amcharts4-ember (英语)

图表 4 的 Ember 添加

安装

ember install @amcharts/amcharts4-ember

使用量

添加数据 amcharts4.files 数组到您的 EmberApp数字 :

let app = new EmberApp(defaults, {
  amcharts4: {
    files: [

    ]
  }
});

然后进入 files 您应当包含您将要使用的各种文件( 如果您忘记包含一个文件, 您将会得到一个运行时间错误, 告诉您需要添加的文件 ):

let app = new EmberApp(defaults, {
  amcharts4: {
    files: [
      "charts",
      "themes/animated"
    ]
  }
});

确定您的模板包含 <div> 图表的元素 :

<div id="chartdiv" style="width: 100%; height: 500px;"></div>

最后,按正常方式导入和使用V4(确保使用 didInsertElement 财务报告和审定财务报表 willDestroyElement 方法:

import Component from "@ember/component";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

am4core.useTheme(am4themes_animated);

export default Component.extend({
  init() {
    this._super(...arguments);
    this.chart = null;
  },

  didInsertElement() {
    this._super(...arguments);

    let chart = am4core.create("chartdiv", am4charts.XYChart);
    chart.paddingRight = 20;

    let data = [];
    let visits = 10;
    for (let i = 1; i < 366; i++) {
      visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
      data.push({ date: new Date(2018, 0, i), name: "name" + i, value: visits });
    }

    chart.data = data;

    let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.renderer.grid.template.location = 0;

    let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.tooltip.disabled = true;
    valueAxis.renderer.minWidth = 35;

    let series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.dateX = "date";
    series.dataFields.valueY = "value";

    series.tooltipText = "{valueY.value}";
    chart.cursor = new am4charts.XYCursor();

    let scrollbarX = new am4charts.XYChartScrollbar();
    scrollbarX.series.push(series);
    chart.scrollbarX = scrollbarX;

    this.chart = chart;
  },

  willDestroyElement() {
    if (this.chart) {
      this.chart.dispose();
    }
    this._super(...arguments);
  }
});