1

我正在使用 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/

--

我需要通过单击在所选系列上显示标签，但不幸的是不能这样做。

也许任何人都可以提供帮助？

提前致谢。

4

1 回答 1

3

最后我找到了解决方案，所以我会在这里发布，也许将来有人会发现它有帮助。

所以我通过 jQuery 的 HTML-DOM 对象找到了解决方案：

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/

于 2013-09-19T12:43:05.587 回答