Extjs 如何将Sencha ExtWebComponent笛卡尔图表添加到应用程序中？

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

我想建立一个这样的图表：

---

以下是如何使用Ext JS web组件快速构建web组件图表

网页包配置

首先，将charts包添加到

导入Sencha图表Web组件

在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>

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;
}

var\u seed=1.3；
函数随机（）{
_种子*=7.3；
_种子-=数学地板（_种子）；
返回种子；
}
导出函数createData（numRecords）{
让数据=[]，
记录={
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，
名称：“项-0”
}，i；
数据推送（记录）；
对于（i=1；i

使用上面的自定义Web组件

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

来源

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

---

@Danny'365CSI'Engelman您应该查看关于回答您自己的问题的帮助部分：发布和回答您自己的问题是一个特定的用例，堆栈溢出是用来共享信息的。@Danny'365CSI'Engelman您应该查看关于回答您自己的问题的帮助部分：发布和回答您自己的问题是一个特定的用例，堆栈溢出被设计为一种共享信息的方式。