AmCharts Легенда

Question

Я пытаюсь повторить на следующей диаграмме

У меня есть проблема, как сделать легенду в левой и в середине каждой коробке, что стеки (Series слово в каждой коробке). Я искал amCharts, но не повезло. Есть ли способ сделать это или как переопределить или расширить amCharts для достижения такого поведения?

Большое спасибо.

Answer 1

Для отображения меток значений используйте labelText proeprty.

Просто установите его на «[[value]]» на ваших графиках. Т.е .:

"graphs": [{ 
    ... 
    "labelText": "[[value]]" 
}] 

Для «легенды» на левой стороне, вы должны будете использовать guides. Он позволяет размещать строки (необязательно) и метки с заданными значениями. Однако вам нужно предварительно вычислить значения, по которым их можно разместить.

Вот полный рабочий пример:

var chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "serial", 
 
    "dataProvider": [{ 
 
    "year": 2011, 
 
    "value1": 13, 
 
    "value2": 5, 
 
    "value3": 4 
 
    }, { 
 
    "year": 2012, 
 
    "value1": 22, 
 
    "value2": 4, 
 
    "value3": 5 
 
    }, { 
 
    "year": 2013, 
 
    "value1": 35, 
 
    "value2": 7, 
 
    "value3": 4 
 
    }], 
 
    "valueAxes": [{ 
 
    "stackType": "regular", 
 
    "axisAlpha": 0, 
 
    "gridAlpha": 0, 
 
    "labelsEnabled": false, 
 
    "tickLength": 0, 
 
    "totalText": "[[total]]", 
 
    "guides": [{ 
 
     "value": 6.5, 
 
     "label": "Series #1", 
 
     "fontSize": 15 
 
    }, { 
 
     "value": 15.5, 
 
     "label": "Series #2", 
 
     "fontSize": 15 
 
    }, { 
 
     "value": 20, 
 
     "label": "Series #3", 
 
     "fontSize": 15 
 
    }] 
 
    }], 
 
    "graphs": [{ 
 
    "fillAlphas": 1, 
 
    "fillColors": "#a0b1cf", 
 
    "labelText": "[[value]]", 
 
    "lineAlpha": 1, 
 
    "lineColor": "#000", 
 
    "title": "value1", 
 
    "type": "column", 
 
    "color": "#000000", 
 
    "valueField": "value1" 
 
    }, { 
 
    "fillAlphas": 1, 
 
    "fillColors": "#c5cde0", 
 
    "labelText": "[[value]]", 
 
    "lineAlpha": 1, 
 
    "lineColor": "#000", 
 
    "title": "value1", 
 
    "type": "column", 
 
    "color": "#000000", 
 
    "valueField": "value2" 
 
    }, { 
 
    "fillAlphas": 1, 
 
    "fillColors": "#dde6eb", 
 
    "labelText": "[[value]]", 
 
    "lineAlpha": 1, 
 
    "lineColor": "#000", 
 
    "title": "value1", 
 
    "type": "column", 
 
    "color": "#000000", 
 
    "valueField": "value3" 
 
    }], 
 
    "categoryField": "year", 
 
    "categoryAxis": { 
 
    "gridPosition": "start", 
 
    "axisAlpha": 0, 
 
    "gridAlpha": 0, 
 
    "position": "left" 
 
    } 
 

 
});

#chartdiv { 
 
    width: 400px; 
 
    height: 400px; 
 
}

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="http://www.amcharts.com/lib/3/serial.js"></script> 
 
<div id="chartdiv"></div>