AmChartsのデフォルトの軸値

Question

私は、年齢の範囲がjsonからの年齢範囲を取得している人口統計図を作成しています。唯一の問題は、値が空の場合です。グラフには何も表示されません。ブロックは巨大であり、それは私が空として表示したいが、まだ目に見える他の年齢のために何も表示されません値....

私のチャートは今：

することができますようにそれはうまく表示されて参照してください、私は値を持っていない他の年齢の範囲を表示したい、これは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>