我有一个带有两个Y轴的Chart JS折线图。加载图表时,我遇到了一个问题,它的高度从未停止增长,就好像它是一个循环,这是我上次运行该图表时,它停止之前的高度超过150000像素。它永远不会停止增长!
我使用C#填充数据集和标签,并从中为图表创建JS。我为单个序列图使用了类似的代码,并且效果很好。
我检查了它不是Async问题,并且整日都在努力解决它。
我将字符串放在ViewBag
中,并将其发送到名为Razor View
的{{1}}。
C#代码很简单。
@Html.Raw(ViewBag.HtmlStr)
我在 string tempValues = "";
string humValues = "";
chart = "<canvas id=\"myChart\" width=\"400\" height=\"400\"></canvas>";
chart += "<script>";
chart += " var ctx = document.getElementById(\"myChart\").getContext('2d');";
chart += " var detailsChart = new Chart(ctx, {";
chart += " type: 'line',";
chart += " data: {";
chart += "labels: [";
//X Axes
for (int i = 0; i < dt.Rows.Count; i++)
{
chart += "'" + Convert.ToDateTime(dt.Rows[i]["CombineDateTime"]).ToString("dd.MMM.yyyy HH:mm") + "',";
}
chart = chart.Substring(0, chart.Length - 1);
chart += "],";
chart += " datasets: [{";
chart += " fill: false,";
chart += " pointRadius: 0,";
chart += " borderWidth: 3,";
chart += " bordercolor: '#800080',";
chart += " backgroundColor: '#800080',";
chart += " borderColor: '#800080',";
chart += " label: 'Temperature °C',";
chart += " yAxisID: 'Temperature',";
chart += " data: [";
//Y Axes
for (int i = 0; i < dt.Rows.Count; i++)
{
tempValues += dt.Rows[i]["Temperature"].ToString() + ",";
}
tempValues = tempValues.Substring(0, tempValues.Length - 1);
chart += tempValues;
chart += " ]},";
chart += " {";
chart += " fill: false,";
chart += " pointRadius: 0,";
chart += " borderWidth: 3,";
chart += " bordercolor: '#00B2EE',";
chart += " backgroundColor: '#00B2EE',";
chart += " borderColor: '#00B2EE',";
chart += " label: 'Humidity %RH',";
chart += " yAxisID: 'Humidity',";
chart += "data: [";
//Y Axes
for (int i = 0; i < dt.Rows.Count; i++)
{
humValues += dt.Rows[i]["Humidity"].ToString() + ",";
}
humValues = humValues.Substring(0, humValues.Length - 1);
chart += humValues;
chart += " ]";
chart += "}],";
chart += " },";
chart += " options:";
chart += " {";
chart += " responsive: true,";
chart += " legend: { position: 'top'},";
chart += " maintainAspectRatio: false,";
chart += " tooltips: { mode: 'index', intersect: false,}, hover: { mode: 'nearest', intersect: true},";
chart += " scales:";
chart += " {";
chart += " yAxes: [{";
chart += " id: 'Temperature',";
chart += " type: 'linear',";
chart += " position: 'left',";
chart += " ticks:";
chart += " {";
chart += " max: 135,";
chart += " min: 0,";
chart += " steps: 10,";
chart += " stepValue: 5,";
chart += " callback: function(value, index, values) {";
chart += " return value.toFixed(2) + '°C';";
chart += " },";
chart += " },";
chart += " }, {";
chart += " id: 'Humidity',";
chart += " type: 'linear',";
chart += " position: 'right',";
chart += " ticks:";
chart += " {";
chart += " max: 30,";
chart += " min: 0,";
chart += " steps: 10,";
chart += " stepValue: 5,";
chart += " callback: function(value, index, values) {";
chart += " return value.toFixed(2) + ' %RH';";
chart += " },";
chart += " },";
chart += " }],";
chart += " xAxes: [{";
chart += " display: true,";
chart += " ticks: { autoSkip: true, maxTicksLimit: 50 },";
chart += " beginAtZero: true,";
chart += " labelString: 'Date/Time'";
chart += " }],";
chart += " }";
chart += " }";
chart += " });";
chart += "</script>";
Razor View
谁能告诉我为什么图表的高度持续不断地在增加。