chart.js數據點偏移多個圖表
[英]chart.js datapoint offset multiple charts
問題描述
我對使用Javascript很陌生，所以如果這是個貴族問題，請原諒我。
我正在嘗試制作一個包含4個數據集的圖表，其中第3個數據集與第1個堆疊，第4個數據與第2個堆疊。 我嘗試使用分組堆疊的條形圖，但它僅在第二層堆疊第三和第四層。
我已經使用以下鏈接中的一些標准輸入進行了測試。
以下方法適用於1個圖表，但似乎無法在同一頁面上的多個圖表上正常工作，因為它嘗試在第一個圖表完成后立即在兩個圖表上運行插件，這意味着第二個圖表沒有完成渲染。
我嘗試使用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
}
});
1 個解決方案
解決方案1
0 已采納 2017-06-11 19:12:37
問題是，每當為新的圖表實例創建一個內聯插件時，您還需要在兩個for循環中增加_meta[index]的索引數。 因此，對於第一張圖，它將是_meta[0] ，第二張圖是_meta[1] ，第三張圖是_meta[2] ，依此類推...
這是您的代碼的工作版本...
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, }] }, plugins: [{ afterUpdate: function(chart) { var dataset = chart.config.data.datasets[0]; var offset = -20; for (var i = 0; i < dataset._meta[1].data.length; i++) { var model = dataset._meta[1].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[1].data.length; o++) { var model2 = dataset2._meta[1].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 } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> <canvas id="myChartTEC"></canvas> <canvas id="myChart"></canvas>
Chart.js-多個折線圖-[2]
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.