Amcharts v3多类别步骤图

Question

我正在尝试在同一张图表上生成2个具有独立X轴（类别）值的图形（阶梯线）。我所能接近的是：

AmCharts.makeChart("price-level-compare",
        {
            type: "serial",
            dataProvider:
                [
                    {qty1: 1,   price1: 2.3, qty2: 1, price2: 3.6},
                    {qty1: 2,   price1: 2.2, qty2: 5, price2: 3.3},
                    {qty1: 10,  price1: 1.97,qty2: 10, price2: 3.1},
                    {qty1: 100, price1: 1.54,qty2: 200,price2: 1.1},
                    {qty1: 500, price1: 1.2, qty2: 300,price2: 1.0}
                ],
            graphs: [{
                "id":"g1",
                "type": "step",
                "lineThickness": 2,
                "bullet":"square",
                "bulletAlpha":0,
                "bulletSize":4,
                "bulletBorderAlpha":0,
                "valueField": "price1"
            },{
                "id":"g2",
                "type": "step",
                "lineThickness": 2,
                "bullet":"square",
                "bulletAlpha":0,
                "bulletSize":4,
                "bulletBorderAlpha":0,
                "valueField": "price2"
            }],
            "categoryField": "qty1"

        }
    );

会产生此错误的图形：

我看不到如何指定另一个名为“ qty2”的“ categoryField”作为“ price2”值的X轴值。

Answer 1

序列图不支持多个categoryFields。

鉴于您的数据是数字数据，因此XY图表更合适。只需将每个图的xField和yField设置为指向数据中的适当值即可。

  graphs: [
    {
      id: "g1",
      type: "step",
      lineThickness: 2,
      bullet: "square",
      bulletAlpha: 0,
      bulletSize: 4,
      bulletBorderAlpha: 0,
      xField: "qty1",
      yField: "price1"
    },
    {
      id: "g2",
      type: "step",
      lineThickness: 2,
      bullet: "square",
      bulletAlpha: 0,
      bulletSize: 4,
      bulletBorderAlpha: 0,
      xField: "qty2",
      yField: "price2"
    }

下面的演示。

 AmCharts.makeChart("chartdiv", {
  type: "xy",
  dataProvider: [
    { qty1: 1, price1: 2.3, qty2: 1, price2: 3.6 },
    { qty1: 2, price1: 2.2, qty2: 5, price2: 3.3 },
    { qty1: 10, price1: 1.97, qty2: 10, price2: 3.1 },
    { qty1: 100, price1: 1.54, qty2: 200, price2: 1.1 },
    { qty1: 500, price1: 1.2, qty2: 300, price2: 1.0 }
  ],
  graphs: [
    {
      id: "g1",
      type: "step",
      lineThickness: 2,
      bullet: "square",
      bulletAlpha: 0,
      bulletSize: 4,
      bulletBorderAlpha: 0,
      xField: "qty1",
      yField: "price1"
    },
    {
      id: "g2",
      type: "step",
      lineThickness: 2,
      bullet: "square",
      bulletAlpha: 0,
      bulletSize: 4,
      bulletBorderAlpha: 0,
      xField: "qty2",
      yField: "price2"
    }
  ]
});

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
	width: 100%;
	height: 100%;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/xy.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

不幸的是，不支持步进线，因此这是您在v3中可以做到的最好的结果。

v4的XY图表可以处理带有XY数值的阶梯线。您可以创建StepLineSeries并为X和Y值设置valueY和valueX属性

// Create series
var series1 = chart.series.push(new am4charts.StepLineSeries());
series1.dataFields.valueX = "qty1";
series1.dataFields.valueY = "price1";
series1.strokeWidth = 2;

var bullet1 = series1.bullets.push(new am4charts.Bullet());
var square = bullet1.createChild(am4core.Rectangle);
square.width = 10;
square.height = 10;
square.horizontalCenter = "middle";
square.verticalCenter = "middle";

bullet1.tooltipText = "Price: {valueX}\nQty: {valueY}";
//repeat for your second series

完整的演示如下：

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [
        { qty1: 1, price1: 2.3, qty2: 1, price2: 3.6 },
        { qty1: 2, price1: 2.2, qty2: 5, price2: 3.3 },
        { qty1: 10, price1: 1.97, qty2: 10, price2: 3.1 },
        { qty1: 100, price1: 1.54, qty2: 200, price2: 1.1 },
        { qty1: 500, price1: 1.2, qty2: 300, price2: 1.0 }
  ];

// Create axes
var xAxis = chart.xAxes.push(new am4charts.ValueAxis());
xAxis.renderer.minGridDistance = 40;

// Create value axis
var yAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
var series1 = chart.series.push(new am4charts.StepLineSeries());
series1.dataFields.valueX = "qty1";
series1.dataFields.valueY = "price1";
series1.strokeWidth = 2;

var bullet1 = series1.bullets.push(new am4charts.Bullet());
var square = bullet1.createChild(am4core.Rectangle);
square.width = 10;
square.height = 10;
square.horizontalCenter = "middle";
square.verticalCenter = "middle";

bullet1.tooltipText = "Price: {valueX}\nQty: {valueY}";

var series2 = chart.series.push(new am4charts.StepLineSeries());
series2.dataFields.valueX = "qty2";
series2.dataFields.valueY = "price2";

var bullet2 = series2.bullets.push(new am4charts.CircleBullet());
var square2 = bullet2.createChild(am4core.Rectangle);
square2.width = 10;
square2.height = 10;
square2.horizontalCenter = "middle";
square2.verticalCenter = "middle";

bullet2.tooltipText = "Price: {valueX}\nQty: {valueY}";

html, body {
width: 100%;
height: 100%;
margin: 0;
}

#chartdiv {
  width: 100%;
  height: 100%;
}

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>

有关v4 XY图表的更多信息，请参见here。