我用chart.js在MVC中创建了一些图表没有问题现在我想按照这个例子在折线图中实现放大
在我的布局页面中,我添加了:
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.7/hammer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.7/dist/chartjs-plugin-zoom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
我的 JS 函数是这样的:
function ShowStepEventsChart(selectedFeatureId, targetID) {
var title = $("#myChart_" + event.target.id).data("title");
var xLabel = $("#myChart_" + event.target.id).data("xlabel");
var yLabel = $("#myChart_" + event.target.id).data("ylabel");
var ctx = $("#myChart_" + event.target.id).get(0).getContext("2d");
// Used here in order to be able to insert dataset later on.
var data = {
labels: null
};
var myNewChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
responsive: true,
title: { display: false, text: title },
legend: { position: 'top' },
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'x'
},
zoom: {
enabled: true,
mode: 'x'
}
}
},
scales:
{
xAxes: [{
gridLines: { display: true }, display: true, scaleLabel: { display: true, labelString: xLabel }, /*ticks: { beginAtZero: true, stepSize: 1 }*/
ticks: {
callback: function (value, index, values) {
return parseFloat(value).toFixed(0);
},
autoSkip: true,
maxTicksLimit: 20,
stepSize: 1
}
}],
yAxes: [{ gridLines: { display: true }, display: true, scaleLabel: { display: true, labelString: yLabel }, ticks: { beginAtZero: true/*, stepSize: 50 */ } }]
}
}
});
$('.measurementsID').each(function (i, obj) {
var measID = $(this).html();
var startPoint = parseFloat($("#feature_StartPoint_" + measID).data("StartPoint")).toFixed(2) * sensorsFrequency;
var endPoint = parseFloat($("#feature_EndPoint_" + measID).data("EndPoint")).toFixed(2) * sensorsFrequency;
$.ajax({
url: '/API/GetFeature?measurementId=' + measID + '&featureId=' + selectedFeatureId,
type: 'POST',
dataType: 'json',
success: function (reply) {
// Loop through limbs:
for (var a = 0; a < myLimbLabels.length; a++) {
try {
var myData = $(reply.data[name = myLimbLabels[a]].x).slice(startPoint, endPoint);
var myDataset = {
label: myLimbLabels[a],
fill: false,
borderColor: myLimbColors[a],
borderWidth: 1,
pointRadius: 0,
data: myData
}
data.datasets.push(myDataset);
} catch (error) {
$(targetID + " > .card > .PanelBody").html($(targetID + " > .card > .PanelBody").html() + labelList[a] + ": Invalid values for measurement " + measID + "<br />");
}
}
// TimeSpan
try {
var timeSpan = $(reply.data.timeStamps.timeStamps).slice(startPoint, endPoint);
var firstSpan = timeSpan[0];
for (var j = 0; j < timeSpan.length; j++) {
timeSpan[j] = (timeSpan[j] - firstSpan) / sensorsFrequency;
}
data.labels = timeSpan;
} catch (error) {
$(targetID + " > .card > .PanelBody").html($(targetID + " > .card > .PanelBody").html() + "Invalid values for measurement " + measID + "<br />");
}
myNewChart.update();
i += 1;
},
statusCode: {
404: function (content) { addErrorMessage('Cannot find resource.'); },
500: function (content) { addErrorMessage('Internal server error'); }
},
error: function (req, status, errorObj) {
// handle status === "timeout"
// handle other errors
addErrorMessage('Unknown error' + errorObj);
}
});
});
}`
我收到错误消息:
Uncaught TypeError: n.indexOf is not a function at n.determineDataLimits (Chart.min.js:7)
似乎是因为在生成图形后更新图形,但这是我需要的。
我该如何解决?