我不得不使用图表JS，遇到了这个问题，很简单
data = value.x.map(function (a) { return a.x; });
如果我记得，x 是值的名称
尝试使用 console.log 试试
这是我填充图表实例的整个代码
function GetGeometriaRegistos() {
$.ajax({
url: '/Geometrias/GetAll',
dataType: "json",
method: "get",
data: { id: $('#MatrizId').val()},
success: function (response) {
var isBlocked = response.isBlocked;
var grafico = response.grafico;
if (isBlocked) {
$('.blocked-overlay').fadeIn('slow');
}
let data;
var graficos = '';
var dataLabels = [];
componentes = grafico.map(function (a) { return a.componente; });
$.each(grafico, function (index, value) {
graficos += '<div class="frame">';
graficos += '<div class="content">';
graficos += '<canvas id="chart' + index + '" class="d-block w-100"></canvas>';
graficos += '</div>';
graficos += '</div>';
$('#content').html(graficos);
})
$.each(grafico, function (index, value) {
console.log(value);
data = value.x.map(function (a) { return a.x; });
$.each(data, function (index, value) {
dataLabels[index] = 'X' + (index + 1);
});
var ctx = document.getElementById('chart' + index).getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: data,
datasets: [{
label: value.componente,
data: data,
borderColor: ['rgba(54, 162, 235, 1)'],
backgroundColor: 'blue',
borderWith: 1,
fill: false,
pointRadius: 5,
pointHoverRadius: 10
}],
},
options: {
responsive: true,
responsiveAnimationDuration: 400,
maintainAspectRatio: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 0.5,
},
scaleLabel: {
display: true,
labelString: 'Y'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Médias'
}
}]
},
annotation: {
drawTime: 'beforeDatasetsDraw',
annotations: [{
id: 'hline3',
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: value.toleranciaInferior,
borderColor: 'red',
borderWidth: 1,
label: {
backgroundColor: "red",
enabled: true
},
},
{
id: 'hline2',
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: value.toleranciaSuperior,
borderColor: 'red',
borderWidth: 1,
label: {
backgroundColor: "red",
enabled: true
}
}],
}
}
});
});
},
error: function (response) {
swal("Erro", response.responseText, "error");
}
});
}
这也适用于多个图形，而不仅仅是一个