Как загрузить новые графики из option в canvasjs? - PullRequest
Новая
       116

Как загрузить новые графики из option в canvasjs?

1 голос
/ 01 октября 2019

Я хочу загрузить диаграмму в соответствии с выбором диаграммы из выпадающего списка.

Предположим, что при нажатии на круговую диаграмму данные должны отображаться на круговой диаграмме, а при щелчке по столбцу данные должны отображаться в столбце. график и тд.

Я пытаюсь так: - 

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

1 Ответ

1 голос
/ 02 октября 2019

после вызова render,
мы можем получить доступ к типу серии данных следующим образом ... 

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

вместо трех отдельных событий щелчка,
назначить одно событие щелчкав раскрывающийся класс.
затем используйте идентификатор элемента, по которому щелкнули, чтобы установить тип диаграммы ... 

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

см. следующий рабочий фрагмент ... 

$(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>
...