如何在点击饼图切片时打开模态?

时间:2019-10-05 11:25:24

标签: javascript php jquery pie-chart

在此代码中,我创建了一个饼状图,该饼状图工作正常,并且饼图显示了三种颜色,正如我在下面的代码中提到的那样。

现在,我想要的是当我单击颜色#FF0000时,它会显示两种颜色的引导模态。

我不知道该怎么做?

<script>
$(function(){
        //get the pie chart canvas
        var cData = JSON.parse(`<?php echo $chart_data; ?>`);
        var ctx = $("#pie-chart");
        //pie chart data
        var data = {
            // labels: cData.label,
            datasets: [{
                label: "Users Count",
                data: cData.data,
                backgroundColor: [
                    "#FF0000",
                    "#FFFF00",
                    "#008000",
                ],
                borderColor: [
                    "#FF0000",
                    "#FFFF00",
                    "#008000",
                ],
                borderWidth: [1, 1, 1]
            }]
        };
        //options
        var options = {
            responsive: true,
            title: {
                display: true,
                position: "top",
                text: "All Subject Progress",
                fontSize: 18,
                fontColor: "#111"
            },
            legend: {
                display: true,
                position: "bottom"
                // labels: {
                //   fontColor: "#333",
                //   fontSize: 16
                // }
            }
        };
        //create Pie Chart class object
        var chart1 = new Chart(ctx, {
            type: "pie",
            data: data,
            options: options
        });
    });
</script>

<div class="chart-container">
    <div class="pie-chart-container">
        <canvas id="pie-chart"></canvas>
    </div>
</div>

0 个答案:

没有答案