Charts 如何从canvasjs中的选项加载新图表？

我想根据从下拉列表中选择的图表加载图表

假设单击饼图时，数据应显示在饼图中；单击列时，数据应显示在列图中，依此类推

我试着这样做：-

<script>
$(function()
{ 
       var barChart = new CanvasJS.Chart("barChartContainer", 
        {
            animationEnabled: true,
            theme: "light2",
            title:
            {
                text: "Gender wise Employees Length",
                fontSize: 20,
                fontFamily: "Trebuchet MS",
                fontWeight: "bold",
                margin: 10
            },
            axisY :{
                title: "Number of Employees"
            },
            data: [{        
                type: "funnel",  // column pie funnel line
                dataPoints: [                                           
                    { y: ${male}, label: "MALE" },                   
                    { y: ${female},  label: "FEMALE" }                  
                    ] 
                  }]
        });

       barChart.render(); 

       }
});
</script>
<div class="card shadow p-1 bg-white rounded">
    <div class="card-body">
        <div class="dropdown mr-20">
            <img src="${pageContext.request.contextPath}/resources/images/list.png" alt="edit" class="image dropdown-toggle" data-toggle="dropdown"/>
            <div class="dropdown-menu">
                <a class="dropdown-item" id="pie" href="#">Pie</a>
                <a class="dropdown-item" id="bar" href="#">Bar</a>
                <a class="dropdown-item" id="funnel" href="#">Funnel</a>
            </div>
        </div>
        <div id="barChartContainer" style="height: 240px; width: 100%;"></div>
    </div>
</div>
<script>
    $("#pie").click(function()
    {
         alert("Pie was clicked.");
    });
    $("#bar").click(function()
    {
         alert("Bar was clicked."); 
    });
    $("#funnel").click(function()
    {
         alert("Funnel was clicked.");
    });
</script>

$（函数（）
{ 
var barChart=new CanvasJS.Chart（“barChartContainer”，
{
animationEnabled：没错，
主题：“light2”，
标题：
{
文本：“按性别区分的员工长度”，
尺寸：20，
fontFamily：“投石机MS”，
fontWeight：“粗体”，
差额：10
},
axisY：{
标题：“雇员人数”
},
数据：[{
类型：“漏斗”，//列饼图漏斗线
数据点：[
{y:${male}，标签：“male”}，
{y:${female}，标签：“female”}
] 
}]
});
render（）；
}
});
$（“#饼”）。单击（函数（）
{
警报（“已单击饼”）；
});
$（“#条”）。单击（函数（）
{
警报（“已单击条”）；
});
$（“#漏斗”）。单击（函数（）
{
警报（“漏斗被点击”）；
});
调用
渲染
后，

我们可以按如下方式访问数据系列类型

barChart.options.data[0].type = 'pie';

而不是有三个单独的点击事件，

将单击事件分配给下拉类。

然后使用单击的元素的id设置图表类型

$(".dropdown-item").click(function(e) {
  barChart.options.data[0].type = e.target.id;
  barChart.render();
});

请参阅以下工作片段


$（函数（）{
var barChart=new CanvasJS.Chart（“barChartContainer”{
animationEnabled：没错，
主题：“light2”，
标题：{
文本：“按性别区分的员工长度”，
尺寸：20，
fontFamily：“投石机MS”，
fontWeight：“粗体”，
差额：10
},
axisY：{
标题：“雇员人数”
},
数据：[{
类型：“漏斗”，
数据点：[
{y:10，标签：“男性”}，
{y:10，标签：“女性”}
]
}]
});
render（）；
$（“.dropdown item”）。单击（函数（e）{
barChart.options.data[0].type=e.target.id；
render（）；
});
});