简体   繁体   中英

multiple charts js in page but with same tooltips (about last chart)

I have more doughnut charts in one page, every chart have different data but I show the same tooltips. It's tooltips of the last chart. I don't found the problem.

This is js code:

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

    }

If I have two doughnut chart, in witch in the first chart datasets.data = [10,90], and in the second chart datasets.data = [2,98], the tooltips for all two chart show 'Errati: 2' and 'Esatti: 98'. It's values like the second chart.

I'm also try to use an array for var dataDoughnutChart like:

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

but don't resolve. Thanks for your help.

Resolved like below: // .....

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]);           

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM