Chart.js日期和時間條形圖不呈現 - 線條雖然

我使用Chart.js創建日期時間條形圖，顯示多個服務器中玩家的數量，具體取決於上次掃描的日期和時間。但是，出於某種原因，條形圖不會呈現。如果我使用線型圖表，它會呈現很好。任何人都知道爲什麼條形圖不會渲染？我在開發人員工具中沒有任何控制檯錯誤。Chart.js日期和時間條形圖不呈現 - 線條雖然

這裏的小提琴：

https://jsfiddle.net/j3rmjzpw/2/

HTML：

<canvas id='playerChartLine' width='800' height='400'></canvas> 
<canvas id='playerChartBar' width='800' height='400'></canvas>

的Javascript/jQuery的：

$(document).ready(function() { 
    renderChartJS("line", "playerChartLine", [{x: "2017-07-04T01:51:02-06:00", y: 240}, {x: "2017-07-04T10:51:02-06:00", y: 150}], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players 
    renderChartJS("bar", "playerChartBar", [{x: "2017-07-04T01:51:02-06:00", y: 240}, {x: "2017-07-04T10:51:02-06:00", y: 150}], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players 
}); 


function renderChartJS(chartType, elemId, data, title, xAxisLabel, yAxisLabel, rgbaColorStr, yMax){ 

    var ticksObj = { 
     suggestedMin: 0, 
     beginAtZero: true, 
     stepValue: 50,   
    } 

    if(yMax != 0){ 
     ticksObj.max = yMax; 
    } 

    if(data.length){ 
     var ctx = document.getElementById(elemId).getContext('2d'); 
     var myChart = new Chart(ctx, { 
      type: chartType, 
      data: { 
       datasets: [{ 
        label: yAxisLabel, 
        data: data, 
        borderColor: "rgba(" + rgbaColorStr + ",1)", 
        backgroundColor: "rgba(" + rgbaColorStr + ",0.5)" 
       }], 
      }, 
      options: { 
       responsive: false, 
       maintainAspectRatio: true, 
       scaleBeginAtZero: true, 
       title: 
       { 
        display: true, 
        text: title 
       }, 
       scales: { 
        xAxes: [{ 
         type: "time", 
         display: true, 
         scaleLabel: { 
          display: true, 
          labelString: xAxisLabel 
         }, 
         ticks: { 
          minRotation: 90, 
          maxRotation: 90, 
          stepValue: 10, 
          autoSkip: true, 
          maxTicksLimit: 50 
         }, 
         time: { 
          unit: 'minute', 
          unitStepSize: 10, 
          max: data[data.length - 1].x 
         } 
        }], 
        yAxes: [{ 
         display: true, 
         scaleLabel: { 
          display: true, 
          labelString: yAxisLabel 
         }, 
         ticks: ticksObj 
        }] 
       } 

      } 
     }); 
    } 
}

底端的圖表應該是條形圖，但它不是正確渲染。

任何人都知道發生了什麼？

來源

2017-07-04 OwN

問題是，條形圖不支持您提供的數據格式類型。

你還是使用下列類型的數據格式...

renderChartJS("line", "playerChartLine", ["2017-07-04T01:51:02-06:00", "2017-07-04T10:51:02-06:00"], [240, 150], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players 
renderChartJS("bar", "playerChartBar", ["2017-07-04T01:51:02-06:00", "2017-07-04T01:59:02-06:00"], [240, 150], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players

這裏，第三個參數是x軸labels和第四一個是data

和，這裏的工作版本的代碼，這個應用...

$(document).ready(function() { 
 
    renderChartJS("line", "playerChartLine", ["2017-07-04T01:51:02-06:00", "2017-07-04T10:51:02-06:00"], [240, 150], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players 
 
    renderChartJS("bar", "playerChartBar", ["2017-07-04T01:51:02-06:00", "2017-07-04T01:59:02-06:00"], [240, 150], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players 
 
}); 
 

 
function renderChartJS(chartType, elemId, labels, data, title, xAxisLabel, yAxisLabel, rgbaColorStr, yMax) { 
 

 
    var ticksObj = { 
 
     suggestedMin: 0, 
 
     beginAtZero: true, 
 
     stepValue: 50, 
 
    } 
 

 
    if (yMax != 0) { 
 
     ticksObj.max = yMax; 
 
    } 
 

 
    if (data.length) { 
 
     var ctx = document.getElementById(elemId).getContext('2d'); 
 
     var myChart = new Chart(ctx, { 
 
     type: chartType, 
 
     data: { 
 
      labels: labels, 
 
      datasets: [{ 
 
       label: yAxisLabel, 
 
       data: data, 
 
       borderColor: "rgba(" + rgbaColorStr + ",1)", 
 
       backgroundColor: "rgba(" + rgbaColorStr + ",0.5)" 
 
      }], 
 
     }, 
 
     options: { 
 
      responsive: false, 
 
      maintainAspectRatio: true, 
 
      scaleBeginAtZero: true, 
 
      title: { 
 
       display: true, 
 
       text: title 
 
      }, 
 
      scales: { 
 
       xAxes: [{ 
 
        type: "time", 
 
        display: true, 
 
        scaleLabel: { 
 
        display: true, 
 
        labelString: xAxisLabel 
 
        }, 
 
        ticks: { 
 
        minRotation: 90, 
 
        maxRotation: 90, 
 
        stepValue: 10, 
 
        autoSkip: true, 
 
        maxTicksLimit: 50 
 
        }, 
 
        time: { 
 
        unit: 'minute', 
 
        unitStepSize: 10, 
 
        max: data[data.length - 1].x 
 
        } 
 
       }], 
 
       yAxes: [{ 
 
        display: true, 
 
        scaleLabel: { 
 
        display: true, 
 
        labelString: yAxisLabel 
 
        }, 
 
        ticks: ticksObj 
 
       }] 
 
      } 
 

 
     } 
 
     }); 
 
    } 
 
}

<script src="https://github.com/chartjs/Chart.js/releases/download/v2.6.0/Chart.bundle.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id='playerChartLine' width='800' height='400'></canvas> 
 
<canvas id='playerChartBar' width='800' height='400'></canvas>

來源

2017-07-04 18:47:01

謝謝。如果您不必根據呈現的圖表類型更改數據格式，我認爲Chart.js會更好。我會看看他們在GitHub上說些什麼。 – OwN

我和@OwN有着相似的經歷，直到我將數據和標籤拆分爲單獨的數組時，才能獲得條形圖。但[文檔]（http://www.chartjs.org/docs/latest/charts/bar.html#data-structure）意味着'{x，y}'風格的數據適用於條形圖。有什麼想法是什麼問題？糟糕的文檔？ –

@David Peters'{x，y}'數據樣式已經在ChartJS v2.7以上版本中實現，因此如果您使用的是舊版本，則應該切換到新版本。 –

Chart.js日期和時間條形圖不呈現 - 線條雖然

回答

相關問題