2017-02-03 4 views
0

Есть ли способ добавить последние значения в графе к именам легенд, если они не навешиваются на график AmCharts?Добавление последних значений в легенды в диаграмме AmCharts

Это код с демо-графикой. https://codepen.io/anon/pen/LxmLaL

Вот код JS

var chartData = generateChartData(); 

var chart = AmCharts.makeChart("chartdiv", { 
    "type": "serial", 
    "theme": "light", 
    "legend": { 
     "periodValueText":"last" 
    }, 
    "dataProvider": chartData, 
    "synchronizeGrid":true, 
    "valueAxes": [{ 
     "id":"v1", 
     "axisColor": "#FF6600", 
     "axisThickness": 2, 
     "axisAlpha": 1, 
     "position": "left" 
    }, { 
     "id":"v2", 
     "axisColor": "#FCD202", 
     "axisThickness": 2, 
     "axisAlpha": 1, 
     "position": "right" 
    }, { 
     "id":"v3", 
     "axisColor": "#B0DE09", 
     "axisThickness": 2, 
     "gridAlpha": 0, 
     "offset": 50, 
     "axisAlpha": 1, 
     "position": "left" 
    }], 
    "graphs": [{ 
     "valueAxis": "v1", 
     "lineColor": "#FF6600", 
     "bullet": "round", 
     "bulletBorderThickness": 1, 
     "hideBulletsCount": 30, 
     "title": "red line", 
     "valueField": "visits", 
     "fillAlphas": 0 
    }, { 
     "valueAxis": "v2", 
     "lineColor": "#FCD202", 
     "bullet": "square", 
     "bulletBorderThickness": 1, 
     "hideBulletsCount": 30, 
     "title": "yellow line", 
     "valueField": "hits", 
     "fillAlphas": 0 
    }, { 
     "valueAxis": "v3", 
     "lineColor": "#B0DE09", 
     "bullet": "triangleUp", 
     "bulletBorderThickness": 1, 
     "hideBulletsCount": 30, 
     "title": "green line", 
     "valueField": "views", 
     "fillAlphas": 0 
    }], 
    "chartScrollbar": {}, 
    "chartCursor": { 
     "cursorPosition": "mouse" 
    }, 
    "categoryField": "date", 
    "categoryAxis": { 
     "parseDates": true, 
     "axisColor": "#DADADA", 
     "minorGridEnabled": true 
    } 
}); 

chart.addListener("dataUpdated", zoomChart); 
zoomChart(); 


// generate some random data, quite different range 
function generateChartData() { 
    var chartData = []; 
    var firstDate = new Date(); 
    firstDate.setDate(firstDate.getDate() - 100); 

    for (var i = 0; i < 100; i++) { 
     // we create date objects here. In your data, you can have date strings 
     // and then set format of your dates using chart.dataDateFormat property, 
     // however when possible, use date objects, as this will speed up chart rendering. 
     var newDate = new Date(firstDate); 
     newDate.setDate(newDate.getDate() + i); 

     var visits = Math.round(Math.sin(i * 5) * i); 
     var hits = Math.round(Math.random() * 80) + 500 + i * 3; 
     var views = Math.round(Math.random() * 6000) + i * 4; 

     chartData.push({ 
      date: newDate, 
      visits: visits, 
      hits: hits, 
      views: views 
     }); 
    } 
    return chartData; 
} 

function zoomChart(){ 
    chart.zoomToIndexes(chart.dataProvider.length - 20, chart.dataProvider.length - 1); 
} 

Я считаю, что это что-то делать с periodValueText, но я не могу понять, как добиться того же. Любая помощь будет оценена по достоинству.

ответ

3

Вы правильно указали, что необходимо использовать periodValueText. Вам просто нужно использовать метакоды с двумя скобками. Для близкого значения это [[value.close]]:

"legend": { 
    "periodValueText":"[[value.close]]" 
} 
+0

Но я действительно не понимаю, что такое '[[value.close]]'. Если я изменяю его на [[value.close]], он просто печатает его ..... – iJade

+0

Это работает для меня. Включили ли вы цитаты? Это должна быть строка. – Robbert

+1

ОК, который делает это thnks :) – iJade

 Смежные вопросы

  • Нет связанных вопросов^_^