javascript - AmCharts 默认轴值

Question

我正在构建一个带有年龄范围的人口统计图表，它从 json 中获取年龄范围，唯一的问题是当值为空时，我的图表不显示任何内容，或者当有一个或两个值时， block 是巨大，它没有显示其他年龄段的任何东西，我想显示为空但仍然可见....

我现在的图表:

如您所见，它显示正常，但我想显示其他没有值的年龄范围，这可以通过 amcharts 中的选项实现吗？

我的json

[{"age":"45 - 64","male":-100,"female":50},{"age":"31 - 45","female":50}]

我的 amcharts Javascript

$.getJSON('<?php echo SITE_URL; ?>analytic/jobs_demographic_json', function(chartData) {
    AmCharts.makeChart("container2", {
        "type": "serial",
        "theme": "light",
        "rotate": true,
        "marginBottom": 50,

        "dataProvider": chartData,
        "startDuration": 1,
        "graphs": [{
            "fillAlphas": 0.8,
            "lineAlpha": 0.2,
            "type": "column",
            "valueField": "male",
            "title": "Male",
            "labelText": "[[value]]",
            "clustered": false,
            "labelFunction": function(item) {
                return Math.abs(item.values.value);
            },
            "balloonFunction": function(item) {
                return item.category + ": " + Math.abs(item.values.value) + "%";
            }
        }, {
            "fillAlphas": 0.8,
            "lineAlpha": 0.2,
            "type": "column",
            "valueField": "female",
            "title": "Female",
            "labelText": "[[value]]",
            "clustered": false,
            "labelFunction": function(item) {
                return Math.abs(item.values.value);
            },
            "balloonFunction": function(item) {
                return item.category + ": " + Math.abs(item.values.value) + "%";
            }
        }],
        "categoryField": "age",
        "categoryAxis": {
            "gridPosition": "start",
            "gridAlpha": 0.2,
            "axisAlpha": 0
        },
        "valueAxes": [{
            "gridAlpha": 0,
            "ignoreAxisWidth": true,
            "labelFunction": function(value) {
                return Math.abs(value) + '%';
            },
            "guides": [{
                "value": 0,
                "lineAlpha": 0.2
            }]
        }],
        "balloon": {
            "fixedPosition": true
        },
        "chartCursor": {
            "valueBalloonsEnabled": false,
            "cursorAlpha": 0.05,
            "fullWidth": true
        },
        "allLabels": [{
            "text": "Male",
            "x": "28%",
            "y": "97%",
            "bold": true,
            "align": "middle"
        }, {
            "text": "Female",
            "x": "75%",
            "y": "97%",
            "bold": true,
            "align": "middle"
        }],
        "export": {
            "enabled": true
        }

    });
});

所以我的问题是，我可以用年龄范围预定义垂直轴，然后用我的值检查年龄范围是否匹配并附加值

Answer 1

您可以使用 AmCharts.addInitHandler()在构建图表之前预处理数据(用于填充缺失类别)的方法。

以下是您如何解决特定任务的工作示例。

/**
 * Custom pre-processor for data
 * This will kick in **before** the chart is built
 * We'll manipulate the data to add "missing" categories
 * The category list should be added as an array in `categories` setting
 */
AmCharts.addInitHandler( function( chart ) {

  // is `categories` set?
  if ( typeof chart.categories === "undefined" )
    return;

  // build a new data set
  var data = [];
  for ( var i = 0; i < chart.categories.length; i++ ) {
    data.push( getDataPointByCategory( chart.categories[ i ] ) );
  }

  function getDataPointByCategory( category ) {
    // if we find a category in data, we'll use this data point
    for ( var i = 0; i < chart.dataProvider.length; i++ ) {
      if ( chart.dataProvider[ i ][ chart.categoryField ] == category )
        return chart.dataProvider[ i ];
    }

    // otherwise, we just initialize a new empty datapoint
    var dp = {};
    dp[ chart.categoryField ] = category;
    return dp;
  }
  
  // assign new data
  chart.dataProvider = data;

}, [ "serial" ] );

/**
 * Sample partial data
 */
var chartData = [{
  "age": "45 - 64",
  "male": -100,
  "female": 50
}, {
  "age": "31 - 45",
  "female": 50
}];

/**
 * The chart
 */
AmCharts.makeChart("container2", {
  "type": "serial",
  "theme": "light",
  "rotate": true,
  "marginBottom": 50,
  "dataProvider": chartData,
  "startDuration": 1,
  "graphs": [{
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "male",
    "title": "Male",
    "labelText": "[[value]]",
    "clustered": false,
    "labelFunction": function(item) {
      return Math.abs(item.values.value);
    },
    "balloonFunction": function(item) {
      return item.category + ": " + Math.abs(item.values.value) + "%";
    }
  }, {
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "female",
    "title": "Female",
    "labelText": "[[value]]",
    "clustered": false,
    "labelFunction": function(item) {
      return Math.abs(item.values.value);
    },
    "balloonFunction": function(item) {
      return item.category + ": " + Math.abs(item.values.value) + "%";
    }
  }],
  "categories": [
    "84+",
    "64 - 84",
    "45 - 64",
    "31 - 45",
    "20 - 31",
    "20 and younger"
  ],
  "categoryField": "age",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0.2,
    "axisAlpha": 0
  },
  "valueAxes": [{
    "gridAlpha": 0,
    "ignoreAxisWidth": true,
    "labelFunction": function(value) {
      return Math.abs(value) + '%';
    },
    "guides": [{
      "value": 0,
      "lineAlpha": 0.2
    }]
  }],
  "balloon": {
    "fixedPosition": true
  },
  "chartCursor": {
    "valueBalloonsEnabled": false,
    "cursorAlpha": 0.05,
    "fullWidth": true
  },
  "allLabels": [{
    "text": "Male",
    "x": "28%",
    "y": "97%",
    "bold": true,
    "align": "middle"
  }, {
    "text": "Female",
    "x": "75%",
    "y": "97%",
    "bold": true,
    "align": "middle"
  }],
  "export": {
    "enabled": true
  }

});

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="container2" style="width: 100%; height: 250px;"></div>