如何创建具有动态 y 轴的图表，取决于 JSON 中的最大值

Question

谁能知道如何使用动态 y 轴创建图表，这取决于 JSON 中的最大值？我试图找到，但即使在 amCharts 文档中也没有得到任何解决方案。

Json格式

{
        "driver_data": [
            {
                "slot": 0,
                "rideCount": 10
            },
            {
                "slot": 30,
                "rideCount": 20
            },
            {
                "slot": 100,
                "rideCount": 60
            }
        ],
        "passenger_data": [
            {
                "slot": 0,
                "rideCount": 3
            },
            {
                "slot": 30,
                "rideCount": 10
            },
            {
                "slot": 100,
                "rideCount": 80
            },

        ]
    }

Answer 1

您可以使用 dataLoader 的 complete callback 在您的 dataProvider 中获取您的 procssed JSON 并根据堆。例如：

    complete: function(chart) {
      //get valueFields
      var valueFields = chart.graphs.map(function(graph) {
        return graph.valueField;
      });
      //find the maximum stack in each category
      var maxValue = chart.dataProvider.reduce(function(maxValue, dataItem) { 
        var sum = valueFields.reduce(function(sum, valueField) {
          return sum + dataItem[valueField];
        }, 0);
        return Math.max(maxValue, sum);
      }, Number.MIN_VALUE);
      //update each value axis' maximum and set strictMinMax to true
      chart.valueAxes.forEach(function(valueAxis) {
        valueAxis.maximum = maxValue;
        valueAxis.strictMinMax = true;
      });
      //update chart
      chart.validateData();
    }
  },

Demo

如何创建具有动态 y 轴的图表，取决于 JSON 中的最大值

How to create chart with dynamic y-axis, depends upon highest values in JSON

html

javascript

jquery

json

amcharts