javascript - DevExpress ChartJS 在点击时显示系列标签

Question

我正在使用 DevExpress ChartJS HTML/Javascript 框架，需要配置方面的帮助:

图表源看起来像这样

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');
        }
    });
});

--

JSFIDDLE:http://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/