Question

我想要构建一个具有散点图然后四行的图表。这四条线将来自完全不同的数据集，具有相同的x min max和y min max但结构不同。如何使用固定的xmin xmax ymin ymax创建一个图表，然后创建另一个图表，另一个图表覆盖另一个图表。

基本上我想要一个图表，其中两个完全不同的数据集具有相同的域和范围，并保持两者的交互性。我正在尝试数据集中的字段映射，但是没有多少运气。我不完全确定我理解字段映射正在做什么。我找到了一个例子：

  "dataSets": [ {
    "title": "first data set",
    "fieldMappings": [ {
      "fromField": "value",
      "toField": "value"
  }, {
      "fromField": "volume",
      "toField": "volume"
  } ],
    "dataProvider": chartData1,
    "categoryField": "date"
}, {
    "title": "second data set",
    "fieldMappings": [ {
      "fromField": "value",
      "toField": "value"
  }, {
      "fromField": "volume",
      "toField": "volume"
  } ],
    "dataProvider": chartData2,
    "categoryField": "date"
}],

我现在正在使用dataloader，如果我可以在一个图表中完成所有操作，我可以同时读取两个数据集中的ajax作为另一个选项。所以我不知道如何在这个例子中使用dataloader。因此，如果有人知道这可能有用，那也会有所帮助。

谢谢！

Answer 1

您可以使用简单的CSS来获取它。

position: absolute，一些定位坐标top＆amp; left和尺寸width＆amp; height。

z-index决定什么是最重要的。

两者的透明背景。

其余的只是图表配置JSON中的配置。

AmCharts.makeChart("chartdiv", {
  "type": "serial",
	"autoMargins": false,
	"marginBottom": 0,
	"marginLeft": 0,
	"marginRight": 0,
	"marginTop": 0,
  "categoryField": "category",
  "startDuration": 1,
  "categoryAxis": {
    "gridPosition": "start"
  },
  "trendLines": [],
  "graphs": [{
      "fillAlphas": 1,
      "fillColors": "#4DCD11",
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "fillAlphas": 1,
      "id": "AmGraph-1",
      "title": "graph 1",
      "type": "column",
      "valueField": "column-1"
    },
    {
      "fillAlphas": 1,
      "fillColors": "#070AB5",
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "fillAlphas": 1,
      "id": "AmGraph-2",
      "title": "graph 2",
      "type": "column",
      "valueField": "column-2"
    }
  ],
  "guides": [],
  "allLabels": [],
  "balloon": {},
  "titles": [{
    "id": "Title-1",
    "size": 15,
    "text": " "
  }],
  "dataProvider": [{
      "category": "1",
      "column-1": 8,
      "column-2": 5
    },
    {
      "category": "2",
      "column-1": 6,
      "column-2": 7
    },
    {
      "category": "3",
      "column-1": 2,
      "column-2": 3
    }
  ]
});

AmCharts.makeChart("chartdiv2", {
  "type": "serial",
  "theme": "light",
	"autoMargins": false,
	"marginBottom": 0,
	"marginLeft": 0,
	"marginRight": 0,
	"marginTop": 0,
  "categoryField": "category",
  "startDuration": 1,
  "categoryAxis": {
    "gridPosition": "start"
  },
  "trendLines": [],
  "graphs": [{
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "id": "AmGraph-1",
      "lineThickness": 6,
      "noStepRisers": true,
      "title": "graph 1",
      "type": "step",
      "valueField": "column-1"
    },
    {
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "id": "AmGraph-2",
      "lineThickness": 6,
      "noStepRisers": true,
      "title": "graph 2",
      "type": "step",
      "valueField": "column-2"
    }
  ],
  "guides": [],
  "valueAxes": [{
    "id": "ValueAxis-1",
    "title": " "
  }],
  "allLabels": [],
  "balloon": {},
  "titles": [{
    "id": "Title-1",
    "size": 15,
    "text": " "
  }],
  "dataProvider": [{
      "category": "1",
      "column-1": 8,
      "column-2": 5
    },
    {
      "category": "2",
      "column-1": 6,
      "column-2": "2"
    },
    {
      "category": "3",
      "column-1": "7",
      "column-2": 3
    },
    {
      "category": "4",
      "column-1": "9",
      "column-2": 3
    },
    {
      "category": "5",
      "column-1": "7",
      "column-2": 1
    },
    {
      "category": "6",
      "column-1": "8",
      "column-2": 2
    },
    {
      "category": "7",
      "column-1": "7",
      "column-2": "6"
    }
  ]
});

#chartdiv,
#chartdiv2 {
  position: absolute;
  background-color: transparent;
}

#chartdiv {
  z-index: 100;
  top: 0;
  left: 0;
  width: 600px;
  height: 400px
}

#chartdiv2 {
  z-index: 120;
  top: 120px;
  left: 100px;
  width: 400px;
  height: 180px
}

<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>
<div id="chartdiv2"></div>

Answer 2

D3应该能够很容易地处理它。您可以使用d3.request（例如d3.json）来调用数据（如果需要，可以在单独的请求中）。然后d3.scale将你的最小/最大值设置为svg图表上的定义点，然后使用所请求的数据将散点/线等绘制到这些点。

稍微讨论一下轴和工具提示，你应该有一个功能图表。

覆盖两个AmCharts

2 个答案:

您可以使用简单的CSS来获取它。