Задать вопрос
talam0nal
@talam0nal
PHP/Laravel разработчик

Как в amcharts отобразить значения наверху графика?

У меня сейчас график следующего вида:
339e2c5c84a44b5686e3f538156eb220.png

Мне нужно, чтобы значения были наверху графика
229ac5acc3564d65a6c5eb0cf05daec0.png
function makeChart() {
				var lineChartData = [
					{
						title:"Январь",
						value:0,
						fromValue: 0,
        				toValue: 1403,
					},
					{
						title:"Февраль",
						value:1403,
						fromValue: 1403,
        				toValue: 3509,
					},
					{
						title:"Март",value:3509
					},

					{
						title:"Апрель",value:4912
					},

					{
						title:"Май",value:7018
					},

					{
						title:"Июнь",value:9124
					},

					{
						title:"Июль",value:10948
					},

					{
						title:"Август",value:11931
					},

					{
						title:"Сентябрь",value:12633
					},

					{
						title:"Октябрь",value:14037
					},


					];
							
              	var chart = new AmCharts.AmSerialChart();

				chart.responsive = {
				  "enabled": true
				};

                chart.dataProvider = lineChartData;
                chart.showBalloon = false;
                chart.categoryField = "title";
                chart.valueField = "value";
                chart.color = "#FFFFFF";
                chart.fontFamily = "ProbaPro Medium";
                chart.fontSize = 12;
                chart.dataProvider = lineChartData;


                // sometimes we need to set margins manually
                // autoMargins should be set to false in order chart to use custom margin values
                chart.autoMargins = false;
                chart.marginRight = 0;
                chart.marginLeft = 0;
                chart.marginBottom = 40;
                chart.marginTop = 20;

                // AXES
                // Это вертикальные линии
                var categoryAxis = chart.categoryAxis;
                categoryAxis.axisColor = "#a6a2ef";
                categoryAxis.gridColor = "#6963e0";
                categoryAxis.color =  "#908de9";
                categoryAxis.parseDates = false; // as our data is date-based, we set parseDates to true
                categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
                categoryAxis.inside = false;
                categoryAxis.gridAlpha = 1;
                categoryAxis.tickLength = 1;
                categoryAxis.axisAlpha = 1;
                categoryAxis.dashLength = 1;
                categoryAxis.fontSize = 11;
                categoryAxis.titleColor = "#E2E2E2";
                categoryAxis.fillColor = "#E2E2E2";

                categoryAxis.offset = 10;

                // value
                //Это горизонтальные линии
                var valueAxis = new AmCharts.ValueAxis();
                
                valueAxis.dashLength = 1;
                valueAxis.axisAlpha = 0;
                valueAxis.fillAlpha = 0;
                valueAxis.gridAlpha = 0;
                valueAxis.position = "top";
                valueAxis.axisColor = "transparent";
                valueAxis.color = "transparent";
                valueAxis.includeAllValues = true;
                valueAxis.includeHidden = true;
                valueAxis.inside = true;

                chart.addValueAxis(valueAxis);

                

                // GRAPH
                var graph = new AmCharts.AmGraph({
                	"showBalloon": false,
					"valueAxes": [
							{
								"position": "top",
								"axisAlpha": 1
							}
						],
					"showAllValueLabels": true,
					"showOnAxis": true,
                });
                graph.type = "line";
                graph.valueField = "value";
                graph.lineColor = "#f43d94";
                graph.lineAlpha = 1;
                graph.showBalloon = false;

				graph.labelText = '[[value]]'; // this will insert values in labels 
				graph.labelPosition = 'top';
				graph.labelOffset = 0;

                graph.lineThickness = 3;
                graph.customBullet = "images/bullet.png"; // bullet for all data points
                graph.bulletSize = 20; // bullet image should be a rectangle (width = height)
                graph.customBulletField = "customBullet"; // this will make the graph to display custom bullet (red star)



                chart.addGraph(graph);


                // CURSOR
                
                var chartCursor = new AmCharts.ChartCursor();
                chartCursor.fullWidth = true;
                chartCursor.cursorAlpha = 0.6;
                chartCursor.valueLineEnabled = false;
                chartCursor.cursorColor = "#7043cf";


                chart.addChartCursor(chartCursor);

                // WRITE
                chart.write("chartdiv");     		
        	}



			AmCharts.ready(function () {
				makeChart();
			});
  • Вопрос задан
  • 690 просмотров
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы