AmCharts

の列チャートで空のバーハンドルIは、以下のようなAmChartsを用いたカラムチャートにデータを移入してい - AmCharts

画像が示すように、そこに何があるので、バーがないんいる2列がデータ。これらの2つのバーを扱う場合、グレーの色やその他のカスタムバーを表示してその分布のデータがないことを表示できます

2017-06-19 Dalton2

これを行うAmChartsには組み込み機能はありませんが、特定のカテゴリにデータがない場合はグラフオブジェクトを使用します。あなたはこれ（それが唯一の関連するチャートの代わりに、すべてのシリーズチャート上で実行されるようにカスタムフラグのチェックを追加すること）のようなグラフの初期化時にあなたのためのフラグを設定する初期化ハンドラを作成することができます

AmCharts.addInitHandler(function(chart) { 
    if (!chart.fillEmptyCategories) { 
    //use a custom flag to determine whether to activate this on a particular chart 
    return; 
    } 
    //collect all the valueFields 
    var dataFields = chart.graphs.map(function(graph) { 
    return graph.valueField; 
    }); 
    //update the dataProvider, setting the noData property on 
    //any array element that does not have any data for a particular category 
    chart.dataProvider.forEach(function(dataItem) { 
    var allEmpty = dataFields.every(function(dataField) { 
     return dataItem[dataField] === undefined; 
    }); 
    if (allEmpty) { 
     dataItem.noData = 1; 
    } 
    }); 
}, ["serial"]);

あなたの空データ列オブジェクトは、次のようになります。

graphs: [ 
    // other graphs omitted 
    { 
     //hide from legend and disable balloon if desired 
     "visibleInLegend": false, 
     "showBalloon": false, 
     "labelText": "No data", 
     "type": "column", 
     "fillAlphas": 1, 
     "lineAlphas": 0, 
     "lineThickness": 0, 
     "fillColors": "#ececec", 
     "valueField": "noData" 
    }]

デモ以下、1つのinitハンドラを実行するために有効なカスタムフラグとチャートと1なし：

AmCharts.addInitHandler(function(chart) { 
 
    if (!chart.fillEmptyCategories) { 
 
    //use a custom property to make this init handler only fire on specific charts 
 
    //that have it set to true. 
 
    return; 
 
    } 
 
    //collect all the valueFields 
 
    var dataFields = chart.graphs.map(function(graph) { 
 
    return graph.valueField; 
 
    }); 
 
    //update the dataProvider, setting the noData property on 
 
    //any array element that does not have any data for a particular category 
 
    chart.dataProvider.forEach(function(dataItem) { 
 
    var allEmpty = dataFields.every(function(dataField) { 
 
     return dataItem[dataField] === undefined; 
 
    }); 
 
    if (allEmpty) { 
 
     dataItem.noData = 1; 
 
    } 
 
    }); 
 
}, ["serial"]); 
 

 
var chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "serial", 
 
    "theme": "light", 
 
    "fillEmptyCategories": true, 
 
    "legend": { 
 
    "position": "right", 
 
    "borderAlpha": 0.2, 
 
    "equalWidths": true, 
 
    "horizontalGap": 10, 
 
    "markerSize": 10, 
 
    "useGraphSettings": true, 
 
    "valueWidth": 0 
 
    }, 
 
    "dataProvider": [{ 
 
    "year": "2002", 
 
    "europe": 2.5, 
 
    "namerica": 2.5, 
 
    "asia": 2.1, 
 
    "lamerica": 0.3, 
 
    "meast": 0.2, 
 
    "africa": 0.1 
 
    }, { 
 
    "year": "2003", 
 
    "europe": 2.6, 
 
    "namerica": 2.7, 
 
    "asia": 2.2, 
 
    "lamerica": 0.3, 
 
    "meast": 0.3, 
 
    "africa": 0.1 
 
    }, { 
 
    "year": "2004" 
 
    }, { 
 
    "year": "2005" 
 
    }, { 
 
    "year": "2006", 
 
    "europe": 2.8, 
 
    "namerica": 2.9, 
 
    "asia": 2.4, 
 
    "lamerica": 0.3, 
 
    "meast": 0.3, 
 
    "africa": 0.1 
 
    }], 
 
    "valueAxes": [{ 
 
    "stackType": "100%", 
 
    "axisAlpha": 0, 
 
    "gridAlpha": 0, 
 
    "labelsEnabled": false, 
 
    "position": "left" 
 
    }], 
 
    "graphs": [{ 
 
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>", 
 
    "fillAlphas": 0.9, 
 
    "fontSize": 11, 
 
    "labelText": "[[percents]]%", 
 
    "lineAlpha": 0.5, 
 
    "title": "Europe", 
 
    "type": "column", 
 
    "valueField": "europe" 
 
    }, { 
 
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>", 
 
    "fillAlphas": 0.9, 
 
    "fontSize": 11, 
 
    "labelText": "[[percents]]%", 
 
    "lineAlpha": 0.5, 
 
    "title": "North America", 
 
    "type": "column", 
 
    "valueField": "namerica" 
 
    }, { 
 
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>", 
 
    "fillAlphas": 0.9, 
 
    "fontSize": 11, 
 
    "labelText": "[[percents]]%", 
 
    "lineAlpha": 0.5, 
 
    "title": "Asia-Pacific", 
 
    "type": "column", 
 
    "valueField": "asia" 
 
    }, { 
 
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>", 
 
    "fillAlphas": 0.9, 
 
    "fontSize": 11, 
 
    "labelText": "[[percents]]%", 
 
    "lineAlpha": 0.5, 
 
    "title": "Latin America", 
 
    "type": "column", 
 
    "valueField": "lamerica" 
 
    }, { 
 
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>", 
 
    "fillAlphas": 0.9, 
 
    "fontSize": 11, 
 
    "labelText": "[[percents]]%", 
 
    "lineAlpha": 0.5, 
 
    "title": "Middle-East", 
 
    "type": "column", 
 
    "valueField": "meast" 
 
    }, { 
 
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>", 
 
    "fillAlphas": 0.9, 
 
    "fontSize": 11, 
 
    "labelText": "[[percents]]%", 
 
    "lineAlpha": 0.5, 
 
    "title": "Africa", 
 
    "type": "column", 
 
    "valueField": "africa" 
 
    }, { 
 
    //hide from legend and disable balloon if desired 
 
    "visibleInLegend": false, 
 
    "showBalloon": false, 
 
    "labelText": "No data", 
 
    "type": "column", 
 
    "fillAlphas": 1, 
 
    "lineAlphas": 0, 
 
    "lineThickness": 0, 
 
    "fillColors": "#ececec", 
 
    "valueField": "noData" 
 
    }], 
 
    "marginTop": 30, 
 
    "marginRight": 0, 
 
    "marginLeft": 0, 
 
    "marginBottom": 40, 
 
    "autoMargins": false, 
 
    "categoryField": "year", 
 
    "categoryAxis": { 
 
    "gridPosition": "start", 
 
    "axisAlpha": 0, 
 
    "gridAlpha": 0 
 
    } 
 
}); 
 

 
//second one to demonstrate the handler not firing. 
 
var chart = AmCharts.makeChart("chartdiv2", { 
 
    "type": "serial", 
 
    "theme": "light", 
 
    "legend": { 
 
    "position": "right", 
 
    "borderAlpha": 0.2, 
 
    "equalWidths": true, 
 
    "horizontalGap": 10, 
 
    "markerSize": 10, 
 
    "useGraphSettings": true, 
 
    "valueWidth": 0 
 
    }, 
 
    "dataProvider": [{ 
 
    "year": "2002", 
 
    "europe": 2.5, 
 
    "namerica": 2.5, 
 
    "asia": 2.1, 
 
    "lamerica": 0.3, 
 
    "meast": 0.2, 
 
    "africa": 0.1 
 
    }, { 
 
    "year": "2003", 
 
    "europe": 2.6, 
 
    "namerica": 2.7, 
 
    "asia": 2.2, 
 
    "lamerica": 0.3, 
 
    "meast": 0.3, 
 
    "africa": 0.1 
 
    }, { 
 
    "year": "2004" 
 
    }, { 
 
    "year": "2005" 
 
    }, { 
 
    "year": "2006", 
 
    "europe": 2.8, 
 
    "namerica": 2.9, 
 
    "asia": 2.4, 
 
    "lamerica": 0.3, 
 
    "meast": 0.3, 
 
    "africa": 0.1 
 
    }], 
 
    "valueAxes": [{ 
 
    "stackType": "100%", 
 
    "axisAlpha": 0, 
 
    "gridAlpha": 0, 
 
    "labelsEnabled": false, 
 
    "position": "left" 
 
    }], 
 
    "graphs": [{ 
 
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>", 
 
    "fillAlphas": 0.9, 
 
    "fontSize": 11, 
 
    "labelText": "[[percents]]%", 
 
    "lineAlpha": 0.5, 
 
    "title": "Europe", 
 
    "type": "column", 
 
    "valueField": "europe" 
 
    }, { 
 
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>", 
 
    "fillAlphas": 0.9, 
 
    "fontSize": 11, 
 
    "labelText": "[[percents]]%", 
 
    "lineAlpha": 0.5, 
 
    "title": "North America", 
 
    "type": "column", 
 
    "valueField": "namerica" 
 
    }, { 
 
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>", 
 
    "fillAlphas": 0.9, 
 
    "fontSize": 11, 
 
    "labelText": "[[percents]]%", 
 
    "lineAlpha": 0.5, 
 
    "title": "Asia-Pacific", 
 
    "type": "column", 
 
    "valueField": "asia" 
 
    }, { 
 
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>", 
 
    "fillAlphas": 0.9, 
 
    "fontSize": 11, 
 
    "labelText": "[[percents]]%", 
 
    "lineAlpha": 0.5, 
 
    "title": "Latin America", 
 
    "type": "column", 
 
    "valueField": "lamerica" 
 
    }, { 
 
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>", 
 
    "fillAlphas": 0.9, 
 
    "fontSize": 11, 
 
    "labelText": "[[percents]]%", 
 
    "lineAlpha": 0.5, 
 
    "title": "Middle-East", 
 
    "type": "column", 
 
    "valueField": "meast" 
 
    }, { 
 
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>", 
 
    "fillAlphas": 0.9, 
 
    "fontSize": 11, 
 
    "labelText": "[[percents]]%", 
 
    "lineAlpha": 0.5, 
 
    "title": "Africa", 
 
    "type": "column", 
 
    "valueField": "africa" 
 
    }, { 
 
    //hide from legend and disable balloon if desired 
 
    "visibleInLegend": false, 
 
    "showBalloon": false, 
 
    "labelText": "No data", 
 
    "type": "column", 
 
    "fillAlphas": 1, 
 
    "lineAlphas": 0, 
 
    "lineThickness": 0, 
 
    "fillColors": "#ececec", 
 
    "valueField": "noData" 
 
    }], 
 
    "marginTop": 30, 
 
    "marginRight": 0, 
 
    "marginLeft": 0, 
 
    "marginBottom": 40, 
 
    "autoMargins": false, 
 
    "categoryField": "year", 
 
    "categoryAxis": { 
 
    "gridPosition": "start", 
 
    "axisAlpha": 0, 
 
    "gridAlpha": 0 
 
    } 
 
});

#chartdiv, #chartdiv2 { 
 
    width: 100%; 
 
    height: 500px; 
 
    font-size: 11px; 
 
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/serial.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
 
<h3>Chart with custom fillEmptyCategories flag set</h3> 
 
<div id="chartdiv"></div> 
 
<h3>Chart without custom flag enabled</h3> 
 
<div id="chartdiv2"></div>

出典

2017-06-20 11:29:40 xorspark

これはうまくいきます。しかし、私は、ページに複数の連続したチャートがあると、それがすべての 'シリーズ'チャートに変更を適用するので、うまくいきません。どうすれば対応できますか？ – Dalton2

必要に応じて、グローバルinitハンドラではなく、その特定のチャートのinitイベントに対して設定することも、カスタム・フラグを設定して目的のチャートに対してのみ起動させることもできます。後者を説明するために私の答えを更新しました。 – xorspark

答えて

関連する問題