永洪社区

标题: JS自定义图表怎么绑定DATA中的数据 [打印本页]

作者: Yve 时间: 2023-3-2 15:43
标题: JS自定义图表怎么绑定DATA中的数据

我想把DATA中的cloumn3,为横轴，cloumn2、3，作为Y轴，替换到下面的代码里面，效果如图二
求大神帮忙

import { Line } from '@antv/g2plot';

const seriesKey = 'series';
const valueKey = 'value';
function processData(data, yFields, meta) {
  const result = [];
  data.forEach((d) => {
yFields.forEach((yField) => {
   const name = meta?.[yField?.alias || yField;
   result.push({ ...d, date: d.date, [seriesKey]: name, [valueKey]: d[yField });
});
  });
  return result;
}

fetch('https://gw.alipayobjects.com/os/antfincdn/nHVKXA8ClI/multiple-measures-line-data.json')
  .then((data) => data.json())
  .then((data) => {
const meta = {
   date: {
      alias: '销售日期',
   },
   price: {
      alias: '单价',
   },
   discount_price: {
      alias: '折扣单价',
   },
};
const line = new Line($container, {
   data: processData(data, ['price', 'discount_price', meta),
   padding: 'auto',
   xField: 'date',
   yField: valueKey,
   seriesField: seriesKey,
   appendPadding: [0, 8, 0, 0,
});

line.render();
  });

作者: yhdata_ruby 时间: 2023-3-2 16:49
参考一下https://www.yonghongtech.com/hel ... ighlightsub=echarts

欢迎光临永洪社区 (http://club.yonghongtech.com/)