DevExpress ChartJS показать этикетки серии на клик

Question

я работаю рамках DevExpress ChartJS HTML/Javascript и нужна помощь с конфигурацией:

источник Chart выглядит следующим образом

var dataSource = [ 
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113 }, 
    { country: 'India', y014: 340419115, y1564: 626520945, y65: 47063757 }, 
    { country: 'United States', y014: 58554755, y1564: 182172625, y65: 34835293 }, 
    { country: 'Indonesia', y014: 68715705, y1564: 146014815, y65: 10053690 }, 
    { country: 'Brazil', y014: 50278034, y1564: 113391494, y65: 9190842 }, 
    { country: 'Russia', y014: 26465156, y1564: 101123777, y65: 18412243 } 
]; 
var series = [ 
    { valueField: 'y014', name: '0-14 years' }, 
    { valueField: 'y1564', name: '15-64 years' }, 
    { valueField: 'y65', name: '65 years and older' } 
]; 

$(function() { 
    $('#chartContainer').dxChart({ 
     dataSource: dataSource, 
     commonSeriesSettings: { 
      argumentField: 'country' 
     }, 
     series: series, 
     title: 'Population: Age Structure (2000)', 
     legend: { 
      horizontalAlignment: 'center', 
      verticalAlignment: 'bottom' 
     }, 
     seriesClick: function (clickedSeries) { 
      //some function 
      alert('need help to show this series labels'); 
     } 
    }); 
}); 

-

JSFIDDLEhttp://jsfiddle.net/fTUc6/

-

Мне нужно показать ярлык в выбранной серии щелчком, но, к сожалению, этого не сделать.

Может быть, кто-нибудь может помочь?

Заранее спасибо.

Answer 1

Наконец-то я нашел решение для этого, поэтому я отправлю его здесь и, возможно, в будущем кто-то найдет его полезным.

Так решение, которое я нашел через HTML-DOM объектов с JQuery:

var dataSource = [ 
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113 }, 
    { country: 'India', y014: 340419115, y1564: 626520945, y65: 47063757 }, 
    { country: 'United States', y014: 58554755, y1564: 182172625, y65: 34835293 }, 
    { country: 'Indonesia', y014: 68715705, y1564: 146014815, y65: 10053690 }, 
    { country: 'Brazil', y014: 50278034, y1564: 113391494, y65: 9190842 }, 
    { country: 'Russia', y014: 26465156, y1564: 101123777, y65: 18412243 } 
]; 
var series = [ 
    { valueField: 'y014', name: '0-14 years' }, 
    { valueField: 'y1564', name: '15-64 years' }, 
    { valueField: 'y65', name: '65 years and older' } 
]; 



$(function() { 

    //Define emty array to store series objects 
    var mySeriesObject = []; 

    $('#chartContainer').dxChart({ 
     dataSource: dataSource, 
     commonSeriesSettings: { 
      argumentField: 'country', 
      label: { 
       visible: true 
      } 
     }, 
     animation: { 
      enabled: false 
     }, 
     series: series, 
     title: 'Population: Age Structure (2000)', 
     legend: { 
      horizontalAlignment: 'center', 
      verticalAlignment: 'bottom' 
     }, 
     seriesClick: function (clickedSeries) { 
          clickedSeries.select(); 
     }, 
     seriesSelected: function (selectedSeries) { 

      //define series labels objects 
      var mySeriesLabels = $('#chartContainer .dxc-series-labels'); 

      //define series labels group 
      var mySeriesLabelsGroup = $('#chartContainer .dxc-labels-group'); 

      //check if series labels objects are stored in mySeriesObject Array 
      if (mySeriesObject.length == 0) { 
       mySeriesObject[0] = mySeriesLabels[0]; 
       mySeriesObject[1] = mySeriesLabels[1]; 
       mySeriesObject[2] = mySeriesLabels[2]; 
      } 

      //clear all labels 
      mySeriesLabels.remove(); 

      //append selected series label 
      mySeriesLabelsGroup.append(mySeriesObject[selectedSeries.index]); 

     }, 
     done: function() { 

      //define series labels objects 
      var mySeriesLabels = $('#chartContainer .dxc-series-labels'); 

      //check if series labels objects are stored in mySeriesObject Array 
      if (mySeriesObject.length == 0) { 
       mySeriesObject[0] = mySeriesLabels[0]; 
       mySeriesObject[1] = mySeriesLabels[1]; 
       mySeriesObject[2] = mySeriesLabels[2]; 
      } 

      //clear all labels 
      mySeriesLabels.remove(); 
     } 
    }); 
}); 

Здесь обновляется JsFiddle для этого: http://jsfiddle.net/zur4ik/fTUc6/5/