如何使用动态y轴创建图表,取决于JSON中的最大值

时间:2018-09-26 07:40:42

标签: javascript jquery html json amcharts

有人可以知道如何使用动态y轴创建图表,该图表取决于JSON中的最高值?我试图找到,但是即使在amCharts文档中也没有得到任何解决方案。

Fiddle

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
            },

        ]
    }

1 个答案:

答案 0 :(得分:2)

您可以使用dataLoader的complete callback在dataProvider中获取经过处理的JSON,并根据堆栈中的最大值更新图表的valueAxes的maximum属性。例如:

    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