ChartJS为每个JSON对象分离图表，而不是悬停在上面时

Question

我对ChartJS和JavaScript很陌生，但我正在尝试为我的django应用程序构建一些图表。我在尝试从同一字符串中的不同JSON对象构建多个图表时遇到了问题。现在，构建了相同的图表，当悬停在上面时，它会切换到第二个视图。我想要一个带有第一个视图或第一个JSON对象的图表，而第二个带有第二个视图/第二个JSON对象。请参阅下面的代码和一些示例数据：

data = [{'title': 'team', 'labels': ['Team score'], 'default': [50.0], 'title': 'single': 'labels': ['Single score'], 'default': [37.5]}]
JS:
var defaultData = [];
var labels = [];

function loadDashboard() {
$.ajax({
method: "GET",
url: endpoint,
success: function(data) {
for (var key in data) {
if (data.hasOwnProperty(key)) {
var objName = Object.keys(data)[0];
var val = data[key];
labels = val.labels;
defaultData = val.default;
updateChart(label=labels, data=defaultData, elementId=objName)
}
}
},
error: function(error_data) {
console.log("error");
console.log(error_data)
}
});
}
function updateChart(label, data, elementId) {
var tableName = document.getElementById(elementId).getContext('2d');
var elementId = new Chart(tableName, {
type: 'bar',
data: {
labels: label,
datasets: [{
label: 'NPS Score',
data: data,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
$(document).ready(function() {
loadDashboard()
});

HTML

<div class="row">
<div class="col-sm-6" id="teamScore" url-endpoint="{% url 'nps-dashboard-data' %}">
<canvas id="teamScoreChart" width="400" height="400"></canvas>
</div>
<div class="col-sm-6" id="singleScore">
<canvas id="singeScoreChart" width="400" height="400"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="{% static 'js/dashboard.js' %}"></script>
</div>

Answer 1

最终为感兴趣的人找到了答案：

var defaultData = [];
var labels = [];

function loadDashboard() {
$.ajax({
method: "GET",
url: endpoint,
success: function (data) {
for (var key in data) {
if (data.hasOwnProperty(key)) {
console.log(data[key])
var val = data[key];
var objName = val['title']
labels = val.labels;
defaultData = val.default;
updateChart(labels, defaultData, objName)
}
}
},
error: function (error_data) {
console.log("error");
console.log(error_data)
}
});
}

function updateChart(label, data, elementId) {
var newTable = document.getElementById(elementId).getContext('2d');
var newElement = new Chart(newTable, {
type: 'bar',
data: {
labels: label,
datasets: [{
label: 'Score',
data: data,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}

$(document).ready(function() {
loadDashboard()
});