在Chart.js中使用不同視圖類型的重疊圖表數據集

Question

我是Chart.js中的新成員。並堅持執行這一圖表：

我的數據是這樣的：

data = { 
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
    datasets: [ 
     { 
     label: 'Issues', 
     backgroundColor: 'rgba(200, 0, 200, 1)', 
     borderColor: 'rgba(255, 159, 64, 1)', 
     data: [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8] 
     }, 
     { 
     label: 'Average value of Issues(from prev. years)', 
     backgroundColor: 'rgba(150, 100, 150, 1)', 
     borderColor: 'rgba(150, 100, 150, 1)', 
     data: [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4] 
     } 
    ] 
    } 

我試圖做它在美亞在那裏我可以修改第二組以「畫」事件的幫助。但我不知道如何做到這一點在chart.js之

主要問題：

1. 如何實現這種類型的圖表？
2. 我應該爲此創建插件還是擴展現有的圖表類型？

在此先感謝您。

Answer 1

由於這項任務可能的解決方案之一是使用不同類型的數據集和其他選項：

const data = { 
    type: 'bar', 
    data: { 
     labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
     datasets: [ 
     { 
      type: 'line', 
      label: 'Average Issues', 
      backgroundColor: 'black', 
      borderColor: 'black', 
      data: [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4], 
      fill: false, 
      pointRadius: 28, 
      pointHoverRadius: 39, 
      showLine: false 
     }, 
     { 
      label: 'Issues', 
      backgroundColor: 'rgba(200, 0, 200, 1)', 
      borderColor: 'rgba(255, 159, 64, 1)', 
      borderWidth: 78, 
      data: [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8] 
     } 
     ] 
    }, 
    options: { 
     scales: { 
     yAxes: [{ 
      ticks: { 
      beginAtZero: true 
      } 
     }] 
     }, 
     responsive: true, 
     legend: { 
     display: false 
     }, 
     elements: { 
     point: { 
      pointStyle: 'line' 
     } 
     } 
    } 
    }; 

    const chart = new Chart(canvasElement, data);