Bizcharts Dataset слияние - PullRequest
Новая
       24

Bizcharts Dataset слияние

0 голосов
/ 08 ноября 2019

Необходимо объединить два набора данных в один, чтобы их можно было одновременно визуализировать на графике. Использование BizCharts для этого. Не хочу добавлять две диаграммы, но хочу спроецировать это только на один график. Нужно строго работать только с BizCharts. Как объединить два набора данных в один?

Я пытался работать со следующим кодом. 

import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";
import DataSet from "@antv/data-set";

class Areanull extends React.Component {
  render() {
    var data = [
      {
        year: "1986",
        ACME: 162,
        Compitor: 42
      },
      {
        year: "1987",
        ACME: 134,
        Compitor: 54
      },
      {
        year: "1988",
        ACME: 116,
        Compitor: 26
      }
    ];
    var data2 = [
      {
        year: "1986",
        ACME: 165,
        Compitor: 47
      },
      {
        year: "1987",
        ACME: 120,
        Compitor: 40
      },
      {
        year: "1988",
        ACME: 140,
        Compitor: 12
      },
      {
        year: "1989",
        ACME: 130,
        Compitor: 40
      },
      {
        year: "1990",
        ACME: 195,
        Compitor: 55
      }
    ];
    var dv = new DataSet.View().source(data);
    var dc = new DataSet.View().source(data2);
    console.log("This works");
    console.log(dc);
    dv.transform({
      type: "fold",
      fields: ["ACME", "Compitor"],
      key: "type",
      value: "value"
    });
    dc.transform({
      type: "fold",
      fields: ["ACME", "Compitor"],
      key: "type",
      value: "value"
    });
    console.log("dc Transformed!");
    console.log(dc);
    const scale = {
      value: {
        alias: "The Share Price in Dollars",
        formatter: function(val) {
          return "$" + val;
        }
      },
      year: {
        range: [0, 1]
      }
    };
    return (
      <div>
        <Chart
          height={window.innerHeight}
          data={dc}
          padding={"auto"}
          scale={scale}
          forceFit
        >
          <Tooltip crosshairs />
          <Axis />
          <Legend />
          <Geom type="area" 
            position="year*value" 
            color="type" 
            shape="smooth"
            />
          <Geom
            type="line"
            position="year*value"
            color="type"
            shape="smooth"
            size={2}
          />
        </Chart>
      </div>
    );
  }
}

ReactDOM.render(<Areanull />, mountNode)
...