页面中的多个图表js但具有相同的工具提示(关于最后一个图表)

时间:2018-03-23 23:12:45

标签: javascript tooltip chart.js

我在一个页面中有更多的圆环图,每个图表都有不同的数据,但我显示相同的工具提示。这是最后一张图表的工具提示。我没有发现问题。

这是js代码:

    var idList = [];
    // --------------------
    // Memo ID list...
    // --------------------
    jQuery('.idKQI').each(function (i) {
        idList.push( jQuery(this).text() );
    });
    var idListLength = idList.length;

    // ------------------
    // Doughnut loop...
    // ------------------
    var dataDoughnutChart = {

        labels: [
            'KO',
            'OK'
        ],
        datasets: [{
            data: [30,70],
            backgroundColor: [
                '#DF0101',  // red
                '#31B404'   // green
            ]
        }]
    };        
    var optionsDoughnutChart = {
        maintainAspectRatio: false,
        responsive: true,
        legend: {
            display: false
        },
        tooltips: {             
            mode: 'dataset'
        }
    };

    var idLav;
    var ctxDoughnut;
    var labelAdd;
    var errati;
    var esatti;
    for (var i = 0, max = idListLength; i < max; i++) {            
        idLav = '#' + idList[i] + "_chartDoughnut";            
        ctxDoughnut = jQuery(idLav);

        labelAdd = jQuery(idLav).data("labeladd");
        errati = jQuery(idLav).data("errati");
        esatti = jQuery(idLav).data("esatti");
        dataDoughnutChart.labels[0] = 'Errati' + labelAdd;
        dataDoughnutChart.labels[1] = 'Esatti' + labelAdd;
        dataDoughnutChart.datasets[0].data[0] = errati;
        dataDoughnutChart.datasets[0].data[1] = esatti;

        var myDoughnutChart = new Chart(ctxDoughnut, {
            type: 'doughnut',
            data: dataDoughnutChart,
            options: optionsDoughnutChart
        });

    }

如果我有两个圆环图,在第一个图表中的女巫数据.data = [10,90],在第二个图表中的数据集.data = [2,98],所有两个图表的工具提示显示&# 39; Errati:2&#39;和&#39; Esatti:98&#39;。它的价值就像第二张图。

我也尝试将数组用于var dataDoughnutChart,如:

var myDoughnutChart = new Chart(ctxDoughnut, {
            type: 'doughnut',
            data: dataDoughnutChart[i],
            options: optionsDoughnutChart
});

但不要解决。 谢谢你的帮助。

1 个答案:

答案 0 :(得分:0)

解决方法如下:     // .....

configDoughnutList.push(
                {
                    type: 'doughnut',
                    data: {
                        datasets: [{
                            data: [
                                    30,
                                    70
                            ],
                            backgroundColor: [
                                '#DF0101',  // rosso
                                '#31B404'   // verde
                            ],
                            label: 'daughnut_163'
                        }],
                        labels: [
                                'Errati',
                                'Corretti'
                        ]
                    },
                    options: {
                        responsive: true,
                        legend: {
                                display: false
                        },
                        animation: {
                                animateScale: true,
                                animateRotate: true
                        },
                        tooltips: {             
                            mode: 'dataset'
                        }
                    }
                }
        );
        configDoughnutList[i].data.datasets[0].data[0] = errati;
        configDoughnutList[i].data.datasets[0].data[1] = esatti;
        configDoughnutList[i].data.labels[0] = 'Errati' + labelAdd;
        configDoughnutList[i].data.labels[1] = 'Esatti' + labelAdd;

        window.myDoughnut = new Chart(ctxDoughnut, configDoughnutList[i]);