amChartファンネルレポートに％値を追加

Question

凡例から値を削除するにはどうすればよいですか？ ファンネルグラフボックスに '％'アイコンを追加する方法。

パーセント値は、ファンネルに26％しか入れることはできません。そして伝説では、私はテキスト全体、すなわち価値とパーセンテージの両方を入れたいと思っています。それに応じて助けてください。

Answer 1

ファンネルチャートスライスのラベルを変更するには、labelTextを希望の値に変更します。デフォルトでは[[title]]: [[value]]に設定されていますが、パーセント値が必要な場合は[[percents]]%に変更できます。

凡例については、凡例のvalueTextを設定する必要があります。あなたは同様にそれに[[percents]]%を追加できるようにこれは、デフォルトで[[value]]に設定されています：以下

AmCharts.makeChart("chartdiv", { 
    // ... 
    labelText: "[[percents]]%", 
    legend: { 
    valueText: "[[value]] ([[percents]]%)", 
    valueWidth: 75, //you might also need to increase the valueWidth to add more space 
    // ... 
    }, 
    // ... 
}); 

デモ：

var chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "funnel", 
 
    "theme": "light", 
 
    "labelText": "[[percents]]%", 
 
    "legend": { 
 
    "valueText": "[[value]] ([[percents]]%)", 
 
    "valueWidth": 75 
 
    }, 
 
    "dataProvider": [{ 
 
    "title": "Website visits", 
 
    "value": 300 
 
    }, { 
 
    "title": "Downloads", 
 
    "value": 123 
 
    }, { 
 
    "title": "Requested prices", 
 
    "value": 98 
 
    }, { 
 
    "title": "Contacted", 
 
    "value": 72 
 
    }], 
 
    "titleField": "title", 
 
    "marginRight": 160, 
 
    "marginLeft": 15, 
 
    "labelPosition": "right", 
 
    "funnelAlpha": 0.9, 
 
    "valueField": "value", 
 
    "startX": 0, 
 
    "neckWidth": "40%", 
 
    "startAlpha": 0, 
 
    "labelPosition": "center", 
 
    "outlineThickness": 1, 
 
    "neckHeight": "30%", 
 
    "balloonText": "[[title]]:<b>[[value]]</b>", 
 
    "export": { 
 
    "enabled": true 
 
    } 
 
});

#chartdiv { 
 
    width: 100%; 
 
    height: 500px; 
 
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/funnel.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> 
 
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> 
 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
 
<div id="chartdiv"></div>