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

DevExpress ChartJS show series labels on click

本文关键字：显示系列标签 ChartJS DevExpress 更新时间：2023-09-26

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

--

我需要通过单击在所选系列上显示标签，但不幸的是无法做到这一点。

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

提前谢谢。

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

所以我通过 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/