0
我對使用Javascript很新穎，所以請原諒我，如果這是一個難以理解的問題。chart.js數據點偏移多個圖表
我想用4個數據集製作一個圖表，其中第3個數據集與第1個和第4個數據集堆疊在一起，並與第2個數據堆疊在一起。我嘗試過使用分組堆積的條形圖，但它僅在第二個堆疊第三和第四個。
我已經測試過使用一些標準輸入，如下面的鏈接。
下面的方法可以很好地處理1個圖表，只是似乎無法在同一頁面上的多個圖表上工作，因爲它會盡快在第一個圖表完成時在兩個圖表上運行插件，這意味着第二是沒有完成渲染。
How to add an offset to a dataset in Chart js
我一直使用從chart.js之文檔內嵌插件的方法試過了，但它仍然在兩個圖表上運行。 有無論如何得到具體的圖表實例還是有一些其他的方法呢？
var ctx = document.getElementById("myChartTEC").getContext("2d");
var myChart = new Chart.Line(ctx, {
type: 'line',
data: {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC", ""],
datasets: [{
data: [5, 10.5, 18.2, 33.9, 121.2, 184.9, 179.9, 196.1, 158.3, 166.3, 66.4, 20.6, null],
pointLabelFontSize: 4,
borderWidth: 2,
fill: false,
lineTension: .3,
borderColor: "#f37029",
borderCapStyle: 'round',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'bevel',
pointBorderColor: "#f37029",
pointBackgroundColor: "#f37029",
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: "rgba(220,220,220,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
spanGaps: false,
},
{
data: [10, 20, 5.2, 35.9, 121.2, 184.9, 179.9, 196.1, 158.3, 166.3, 66.4, 20.6, null],
pointLabelFontSize: 4,
borderWidth: 2,
fill: false,
lineTension: .3,
borderColor: "#f37029",
borderCapStyle: 'round',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'bevel',
pointBorderColor: "#f37029",
pointBackgroundColor: "#f37029",
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: "rgba(220,220,220,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
spanGaps: false,
}
]
},
plugins: [{
afterUpdate: function (chart) {
var dataset = chart.config.data.datasets[0];
var offset = -20;
for (var i = 0; i < dataset._meta[0].data.length; i++) {
var model = dataset._meta[0].data[i]._model;
model.x += offset;
model.controlPointNextX += offset;
model.controlPointPreviousX += offset;
}
var dataset2 = chart.config.data.datasets[1];
var offset2 = 20;
for (var o = 0; o < dataset2._meta[0].data.length; o++) {
var model2 = dataset2._meta[0].data[o]._model;
model2.x += offset2;
model2.controlPointNextX += offset2;
model2.controlPointPreviousX += offset2;
}
}
}],
options: {
scales: {
xAxes: [{
gridLines: {
offsetGridLines: true,
display: false,
borderDash: [6, 2],
tickMarkLength: 5
},
ticks: {
fontSize: 8,
labelOffset: 10,
maxRotation: 0
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
max: 200,
min: 0,
stepSize: 20,
fontSize: 8
}
}]
},
legend: {
display: false
},
responsive: false,
maintainAspectRatio: true
}
});
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart.Line(ctx, {
type: 'line',
data: {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC", ""],
datasets: [{
data: [5, 10.5, 18.2, 33.9, 121.2, 184.9, 179.9, 196.1, 158.3, 166.3, 66.4, 20.6, null],
pointLabelFontSize: 4,
borderWidth: 2,
fill: false,
lineTension: .3,
borderColor: "#f37029",
borderCapStyle: 'round',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'bevel',
pointBorderColor: "#f37029",
pointBackgroundColor: "#f37029",
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: "rgba(220,220,220,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
spanGaps: false,
},
{
data: [10, 20, 5.2, 35.9, 121.2, 184.9, 179.9, 196.1, 158.3, 166.3, 66.4, 20.6, null],
pointLabelFontSize: 4,
borderWidth: 2,
fill: false,
lineTension: .3,
borderColor: "#f37029",
borderCapStyle: 'round',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'bevel',
pointBorderColor: "#f37029",
pointBackgroundColor: "#f37029",
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: "rgba(220,220,220,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
spanGaps: false,
}]
},
// This part is not working. Uncaught TypeError: Cannot read property 'data' of undefined
plugins: [{
afterUpdate: function (chart) {
var dataset = chart.config.data.datasets[0];
var offset = -20;
for (var i = 0; i < dataset._meta[0].data.length; i++) {
var model = dataset._meta[0].data[i]._model;
model.x += offset;
model.controlPointNextX += offset;
model.controlPointPreviousX += offset;
}
var dataset2 = chart.config.data.datasets[1];
var offset2 = 20;
for (var o = 0; o < dataset2._meta[0].data.length; o++) {
var model2 = dataset2._meta[0].data[o]._model;
model2.x += offset2;
model2.controlPointNextX += offset2;
model2.controlPointPreviousX += offset2;
}
}
}],
options: {
scales: {
xAxes: [{
gridLines: {
offsetGridLines: true,
display: false,
borderDash: [6, 2],
tickMarkLength: 5
},
ticks: {
fontSize: 8,
labelOffset: 10,
maxRotation: 0
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
max: 200,
min: 0,
stepSize: 20,
fontSize: 8
}
}]
},
legend: {
display: false
},
responsive: false,
maintainAspectRatio: true
}
});
提供一些代碼以更好地理解您的問題。 –
添加了我用於測試的代碼。它在第一張圖上工作，但在第二張上打破。 – DennisSchou
我還沒解決。問題在於它正在加載的第一張圖表上工作（而不是在代碼中第一張圖表）。 問題似乎是afterUpdate事件在兩個圖表上觸發，即使它被放置爲內聯插件。因此，當它在第一張圖上觸發時，它也會嘗試在2ns圖表上運行，但由於未加載完成而失敗。 – DennisSchou