如何在Chart.js中添加一個包含表格的圖表？

Question

我正在使用Chart JS 2.5將條形圖中的2個數據對象可視化，並且我可以將這兩個對象的數據值可視化，但我希望看到一個表格也顯示這兩個圖表下方的數據。

Table view that I would like to have 
Date  Data Object 1  Data Object 2 
2 Jan  6     16 
9 Jan  87     57 
16 Jan 56     23 
23 Jan 15     60 
30 Jan 88     78 
6 Feb  60     40 
13 Feb 12     42 

這是代碼我現在有用於生成圖表。

如何檢索數據

Django的 - 代碼段用於從內部Web API的數據檢索

class ChartData(APIView): 

def get(self,request, format=None): 
.... 
# get the filtered json per engineer for the current week 
    weeks_of_data = [] 
    for index, value in enumerate(list_of_engineers): 
     week_of_data.append(filter_url(list_of_engineers[index]).json())  

def filter_url(engineer): 
    filters = {"filter": { 
     "filters": [{ 
      "field": "Triage_DateTime", 
      "operator": "gte", 
      "value": "2017-07-16 23:59:59" 
     }, { 
      "field": "Triage_DateTime", 
      "operator": "lte", 
      "value": "2017-08-11 23:59:59" 
     }, { 
      "field": "Triage_Subcategory", 
      "operator": "neq", 
      "value": "Temporary Degradation" 
     }, { 
      "field": "Triage_Engineer", 
      "operator": "eq", 
      "value": str(engineer) 
     }], 
     "logic": "and" 
    }} 
url = "http://10.61.202.98:8081/T/ansdb/api/rows/dev/t/tickets?" 
response = requests.post(url, json=filters) 
return response 

生JS腳本來顯示圖形

<script> 
    {% block jquery %} 
    var endpoint = '/statistics/chart-data' //This works with the chart_data view. 
    var data_of_weeks = [] 
    var label_number_weeks = [] 

$.ajax({ 
    method: "GET", 
    url: endpoint, 
    dataType: 'json', 
    success: function(data){ 
     console.log(data) 
     label_number_weeks = data.label_number_weeks 
     data_of_weeks = data.data_of_weeks 
     setChart() 

    }, 
    error: function(error_data){ 
     console.log("error on data") 
     console.log(error_data) 
    } 
}) 

function setChart() 
{ 
var ctx_tickets  = document.getElementById("tickets") 

var tickets = new Chart(ctx_tickets, { 

    type:'bar', 
    data: { 
     labels: label_number_weeks, 
     datasets : 
      [ 
      { 
       label: 'Week 29', 
       data: [data_of_weeks[3], data_of_weeks[7],data_of_weeks[11],data_of_weeks[15],data_of_weeks[19], 
         data_of_weeks[23],data_of_weeks[27],data_of_weeks[31],data_of_weeks[35]], 
       backgroundColor: 'rgba(75, 192, 192, 0.6)', 
       borderColor: '#777', 
       borderWidth: 1, 
       hoverBorderWidth: 3, 
       hoverBorderColor: '#000' 
      }, 
     ]}, 
     options: { 
      scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero: true 
       } 
      }] 
      }, 

      title: { 
      display: true, 
      text: 'Tickets by engineer per week', 
      fontSize: 30 
      }, 
     legend: { 
      position: 'right', 
      display: true, 
      labels: { 
       fontColor: '#000' 
       } 
      }, 
      layout: { 
       padding: { 
        left: 50, 
        right: 0, 
        bottom: 0, 
        top: 0 
        } 
      }, 
      tooltips: { 
       enabled: true 
      }, 

      hover : { 
      animationDuration: 0 
      }, 

      animation: { 
      duration: 0.8, 
      onComplete: function(){ 
       var chartInstance = this.chart, 
       ctx = chartInstance.ctx; 
       ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily); 
       ctx.textAlign = 'center'; 
       ctx.textBaseline = 'bottom'; 

       this.data.datasets.forEach(function (dataset, i) { 
       var isHidden = dataset._meta[0].hidden; //'hidden' property of dataset 
       if (!isHidden) { //if dataset is not hidden 
        var meta = chartInstance.controller.getDatasetMeta(i); 
        meta.data.forEach(function (bar, index) { 
         var data = dataset.data[index]; 
         ctx.fillText(data, bar._model.x, bar._model.y - 5);}); 
        }}); 
      } 
      } 
     } 
    }) 
} 

{% endblock %} 
</script> 

用於測試目的簡化HTML

<canvas>id="myChart" width="100" height="100"></canvas> 

簡化JS腳本用於測試目的

var ctx = document.getElementById("myChart"); 
debugger; 
var myChart = new Chart(ctx, { 
type: 'bar', 
data: { 
    labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"], 
datasets: [{ 
    label: 'Data object 1', 
    data: [6, 87, 56, 15, 88, 60, 12], 
    fill: false, 
    backgroundColor: "#4082c4", 
}, 

{ 
    label: 'Data object 2', 
    data: [16, 57, 23, 60, 88, 40, 42], 
    fill: false, 
    backgroundColor: "#9082d4", 
}] 
}, 
options: { 
    "hover": { 
    "animationDuration": 1 
}, 
"animation": { 
    "duration": 1, 
       "onComplete": function() { 
        var chartInstance = this.chart, 
         ctx = chartInstance.ctx; 

        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily); 
        ctx.textAlign = 'center'; 
        ctx.textBaseline = 'bottom'; 

        this.data.datasets.forEach(function (dataset, i) { 
        var meta = chartInstance.controller.getDatasetMeta(i); 
        meta.data.forEach(function (bar, index) { 
        var data = dataset.data[index];        
        ctx.fillText(data, bar._model.x, bar._model.y - 5); 
       }); 
      }); 
     } 
    }, 

legend:{ 
    "display": true 
    }, 
tooltips: { 
    "enabled": true 
}, 
scales: { 
    yAxes: [{ 
      display: false, 
      gridLines: { 
      display : false 
     }, 
     ticks: { 
       display: false, 
      beginAtZero:true 
      } 
     }], 
     xAxes: [{ 
       gridLines: { 
       display : false 
      }, 
      ticks: { 
       beginAtZero:true 
      } 
     }] 
    } 
} 
}); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.js"</script> 

JS小提琴 Edit online

是否有可能加入這兩個圖表下方的表格與ChartJS？ 是否可以使用其他工具，如highCharts或Chartist.js或Dygraphs？我沒有使用大量的數據來繪製圖表，所以這是我決定使用Chart.js的主要原因。