javascript - 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”命名为“price2”值的 X 轴值的“categoryField”。

Answer 1

系列图表不支持多个类别字段。

鉴于您的数据是数字数据，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 .