Datatables с CanvasJS - PullRequest
Новая
       8

Datatables с CanvasJS

0 голосов
/ 28 августа 2018

Я использую таблицы данных для отображения результатов моего запроса, и я установил идентификаторы поиска для использования в качестве идентификаторов для кнопок для фильтрации в таблице: 

$('#Scheduled').on('click', function () {
    dataTables.columns(11).search("Scheduled").draw();});

$('#Review').on('click', function () {
dataTables.columns(11).search("In Review").draw();});

$('#Upcoming').on('click', function () {
dataTables.columns(11).search("Up Coming").draw();});


$('#Services').on('click', function () {
dataTables.columns(11).search("Cust Connection").draw();});

С этим я использую график CanvasJS: 

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "dark2", // "light1", "light2", "dark1", "dark2"
    title:{
        text: "Top Oil Reserves"
    },
    axisY: {
        title: "Reserves(MMbbl)"
    },
    data: [{        
        type: "column",  
        showInLegend: true, 
        legendMarkerColor: "grey",
        legendText: "MMbbl = one million barrels",
        dataPoints: [      
            { y: <?echo $Count_Upcoming;?>, label: "Upcoming" },
            { y: <?echo $Count_Planned;?>,  label: "Scheduled" },
            { y: <?echo $Count_Review;?>,  label: "In Review" },
            { y: <?echo $Count_Trouble;?>,  label: "Trouble" },
            { y: <?echo $Count_Maint;?>,  label: "UG Maintenance" },
            { y: <?echo $Count_CUST;?>, label: "Services" }
        ]
    }]
});
chart.render();

}

Есть ли способ, когда я нажимаю на графическую панель для фильтрации в таблице. Моя идея состоит в том, чтобы дать панель и идентификатор или ссылку, которая будет фильтровать таблицу, нажав на панель canvasJS, как в HTML: 

<h3><strong><a id = "Scheduled" href="#"><?echo $Count_Planned;?></a></strong></h3>

1 Ответ

0 голосов
/ 28 августа 2018

CanvasJS имеет встроенный обработчик кликов для ваших данных, который будет именно тем, что вам нужно. Вы можете использовать его так: 

data: [{
  dataPoints: [      
      { y: <?echo $Count_Upcoming;?>, label: "Upcoming" },
      { y: <?echo $Count_Planned;?>,  label: "Scheduled" },
      { y: <?echo $Count_Review;?>,  label: "In Review" },
      { y: <?echo $Count_Trouble;?>,  label: "Trouble" },
      { y: <?echo $Count_Maint;?>,  label: "UG Maintenance" },
      { y: <?echo $Count_CUST;?>, label: "Services" }
  ],
  click: function (e) {
    var label = e.dataPoint.label;
    dataTables.columns(11).search(label).draw();
  }
}]
...