Chart JS永不停止垂直增长

时间:2019-05-28 00:13:47

标签: c# chart.js razor-pages asp.net-core-2.2

我有一个带有两个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

谁能告诉我为什么图表的高度持续不断地在增加。

0 个答案:

没有答案