使用 CanvasJS 的数据表

Question

我正在使用数据tables 来显示我的查询输出，并且我已将搜索 ID 设置为用作要在 table:

中过滤的按钮的 ID

$('#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();

}

有什么方法可以让我在 table 中单击图表栏进行过滤。我的想法是通过单击 canvasJS 栏来提供栏和 id 或 href 来过滤 table，如 HTML:

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

Answer 1

CanvasJS 为您的数据提供了 built in click handler，这正是您所需要的。你可以这样使用它：

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();
  }
}]

使用 CanvasJS 的数据表

Datatables with CanvasJS

javascript

jquery

datatables

canvasjs