-1

如何将 Sencha ExtWebComponent 笛卡尔图表添加到我的应用程序？如何将其添加为 Web 组件？我将如何设置和加载数据存储？

我想建立一个这样的图表： https ://examples.sencha.com/ExtWebComponents/7.0.0/kitchensink/#BasicArea

笛卡尔图示例

4

1 回答 1

0

这是使用 Ext JS Web 组件构建快速 Web 组件图表的方法。

Webpack 配置

  1. 首先将图表包添加到web 包配置中。

导入 Sencha Chart Web 组件

  1. 在 index.js 中，导入 Sencha Web 组件（请参阅下面的要点）。

下面的示例源

AreaChartComponent.html

<ext-cartesian 
  width="500px" 
  height="500px" 
  downloadServerUrl="http://svg.sencha.io" 
  shadow="true"
  insetPadding="25 35 0 10" 
  axes='[{
      "type": "numeric" ,
      "position": "left" ,
      "fields": ["g1", "g2" , "g3" , "g4" , "g5" , "g6" ],
      "label": { "rotate": { "degrees": "-30" } },
      "grid": { "odd": { "fill": "#e8e8e8" } },
      "title": { "text": "Summation of Data" , "fontSize": "20" }
      }, {
      "type": "category",
      "position": "bottom",
      "fields": "name",
      "grid": "true",
      "visibleRange": ["0", "0.25"],
      "title": { "text": "theme", "fontSize": "20" }
    }]' 
    legend='{
      "type": "sprite",
      "position": "bottom"
    }' 
    series='[{
      "type": "area" ,
      "xField": "name",
      "yField": ["g1", "g2" , "g3" , "g4" , "g5" ],
      "title": ["G1", "G2" , "G3" , "G4" , "G5" ],
      "style": { "stroke": "black" , "lineWidth": "2", "fillOpacity": "0.8" }
    }]' 
    platformConfig='{
      "phone": { "insetPadding": "15 5 0 0" }
    }'>
</ext-cartesian>

AreaChartComponent.js

import * as data from './AreaChartComponentData';
import template from './AreaChartComponent.html'

Ext.require([
  'Ext.chart.theme.Midnight',
  'Ext.chart.theme.Green',
  'Ext.chart.theme.Muted',
  'Ext.chart.theme.Purple',
  'Ext.chart.theme.Sky',
  'Ext.chart.series.Area',
  'Ext.chart.axis.Numeric',
  'Ext.chart.axis.Category'
]);

class AreaChartComponent extends HTMLElement {

  constructor() {
    super()

    this.innerHTML = template;
  }

  connectedCallback() {

    // Delay until Ext JS areaChartEl.ext.el is instantiated and ready.
    setTimeout(() => {
      setTimeout(() => {
        this._renderChart();
      }, 0);
    }, 0);
  }

  disconnectedCallback() {
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
  }

  _renderChart() {
    console.log("Render chart")

    let store = Ext.create('Ext.data.Store', {
      fields: ['id', 'g0', 'g1', 'g2', 'g3', 'g4', 'g5', 'g6', 'name'],
    });
    store.loadData(data.createData(25));

    let areaChartEl = this.querySelector('ext-cartesian');
    areaChartEl.ext.bindStore(store);
  }

}
window.customElements.define('my-chart-area', AreaChartComponent);

AreaChartComponentData.js

var _seed = 1.3;
function random() {
  _seed *= 7.3;
  _seed -= Math.floor(_seed);
  return _seed;
}

export function createData(numRecords) {
  let data = [],
    record = {
      id: 0,
      g0: 300,
      g1: 700 * random() + 100,
      g2: 700 * random() + 100,
      g3: 700 * random() + 100,
      g4: 700 * random() + 100,
      g5: 700 * random() + 100,
      g6: 700 * random() + 100,
      name: 'Item-0'
    }, i;

  data.push(record);

  for (i = 1; i < numRecords; i++) {
    record = {
      id: i,
      g0: record.g0 + 30 * random(),
      g1: Math.abs(record.g1 + 300 * random() - 140),
      g2: Math.abs(record.g2 + 300 * random() - 140),
      g3: Math.abs(record.g3 + 300 * random() - 140),
      g4: Math.abs(record.g4 + 300 * random() - 140),
      g5: Math.abs(record.g5 + 300 * random() - 140),
      g6: Math.abs(record.g6 + 300 * random() - 140),
      name: 'Item-' + i
    };
    data.push(record);
  }

  console.log("data=", data);

  return data;
}

使用上面的自定义 Web 组件

<my-chart-area></my-chart-area>

资源

于 2019-10-20T04:35:24.320 回答