Я создал гистограмму в библиотеке Amchart3. Существует некоторая проблема с выравниванием, которую я не могу исправить по мере необходимости.
1) Я хочу, чтобы надписи перемещались рядом с линией стержня. В настоящее время между этикеткой и линией стержня имеется много места.
2) Хотите добавить радиус границы в верхний и нижний угол линии стержня (только с правой стороны)
Прикрепление изображения ниже дляссылка
Вот мой код:
const barData = [
{
label: "Ford",
income: 200,
max: 500,
colorKey: '#00c7ff'
},
{
label: "Toyota",
income: 380,
max: 500,
colorKey: '#00c7ff'
},
{
label: "Nissan",
income: 180,
max: 500,
colorKey: '#00c7ff'
},
{
label: "BMW",
income: 480,
max: 500,
colorKey: '#00c7ff'
}
];
const colorCodes = ['#00c7ff', '#7700ff', '#638a4a', '#cc2626'];
// bar color
AmCharts.addInitHandler(function (chart) {
// check if there are graphs with autoColor: true set
for(var i = 0; i < chart.graphs.length; i++) {
var graph = chart.graphs[i];
if (graph.autoColor !== true)
continue;
var colorKey = "autoColor-"+i;
graph.lineColorField = colorKey;
graph.fillColorsField = colorKey;
for(var x = 0; x < chart.dataProvider.length; x++) {
var color = colorCodes[x];
chart.dataProvider[x][colorKey] = color;
}
}
}, ["serial"]);
var chart = AmCharts.makeChart("draw", {
hideCredits: true,
type: 'serial',
rotate: true,
autoMargins: false,
addClassNames: true,
resizeCategoryWidth: 10,
marginLeft: 40,
marginRight: 15,
dataProvider: barData,
graphs: [
{
fillAlphas: 1,
lineAlpha: 0,
lineColor: '#2196f3',
type: 'column',
fillColors: '#E2E7EE',
clustered: false,
valueField: 'max',
labelText: '[[label]]',
labelFunction: function(val) {
return val.dataContext.income;
},
labelPosition: 'top',
labelOffset: 14,
columnWidth: 0.18,
cornerRadiusTop: 2,
showBalloon: false,
showOnAxis: true
},
{
fillAlphas: 1,
lineAlpha: 0,
type: 'column',
valueField: 'income',
columnWidth: 0.18,
cornerRadiusTop: 2,
showBalloon: true,
autoColor: true,
showOnAxis: true
}
],
chartCursor: {
categoryBalloonEnabled: false,
cursorAlpha: 0,
zoomable: false
},
categoryField: 'label',
categoryAxis: {
gridAlpha: 0,
color: '#333',
axisAlpha: 1,
axisThickness: 2,
fontSize: 12,
inside: true,
gridPosition: 'start',
tickPosition: 'start',
tickLength: 0,
addClassNames: "bars"
},
valueAxes: [
{
axisAlpha: 0,
gridAlpha: 0,
showLastLabel: false,
zeroGridAlpha: 0,
gridThickness: 0,
labelsEnabled: false
}
],
export: {
enabled: false
}
});
<html>
<head>
<title>HTML Bar Chart</title>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/light.js"></script>
</head>
<body>
<div id="draw" style="width: 600px; height: 400px;"></div>
</body>
</html>
Пожалуйста, предложите свой вклад. Я пробовал много вариантов от Google, но не смог получить его.