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

【问题标题】：How to load new charts from option in canvasjs?如何从 canvasjs 中的选项加载新图表？
【发布时间】：2020-01-30 10:07:18
【问题描述】：

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

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

我正在尝试这样：-

<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>

【问题讨论】：

标签： charts canvasjs

【解决方案1】：

render 被调用后，
我们可以按如下方式访问数据系列类型...

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

而不是三个单独的点击事件，
将单击事件分配给下拉类。
然后使用被点击元素的id来设置图表类型...

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

请参阅以下工作 sn-p...

$(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",
      dataPoints: [
        {y: 10, label: "MALE"},
        {y: 10, label: "FEMALE"}
      ]
    }]
  });

  barChart.render();

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div class="card shadow p-1 bg-white rounded">
  <div class="card-body">
    <div class="dropdown mr-20">
      <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>

【讨论】：