Question

我在项目中创建了一个图表模块。我在这个图表上添加了过滤器，如月份显示数据和周智能显示数据。过滤也很好。但我在这个图表上面临一个问题。我不知道我的错误在哪里，或者有些js即将到来我不知道。

我在这里描述我的问题 - 第一次明智地加载图表。然后在我更改下拉值并选择周显示数据之后。然后数据也显示正确。但然后在我使用鼠标指针和指针从左到右移动此图表后，时间图表数据会发生变化并自动显示月份数据。为什么这个问题越来越多我不知道。在这下面我已经展示了我的代码如何做到这一点。请让我知道我的问题在哪里。

这是我的html page =＆gt;

<canvas id="myChart"></canvas>

这是我的过滤器下拉菜单=＆gt;

  Filter :
            <select id="ddlFilter" onchange="FilterCharts()">
                <option selected="" value="Month">Month</option>
                <option value="Week">Week</option>
            </select>

这是我的脚本链接=＆gt;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>

这是我第一次在月度加载时调用ajax调用=＆gt;

var FilterType = '';
$(document).ready(function () { 
  FilterType = $("#ddlFilter option:selected").val();
   LoadCharts(FilterType );
 });

这是我的ajax调用并在chart =＆gt;中绑定数据

function LoadCharts(FilterType )
{
$.ajax({
    url: 'Home/GetChartsData',
    dataType: "json",
    data: { FilterType: FilterType},
    type: "GET",
    contentType: 'application/json; charset=utf-8',
    async: false,
    cache: false,
    success: function (data) {
         var arrlableForSignUpUser = new Array();
        var arrdataForSignUpUser = new Array();
        for (var i = 0; i < data.data.length; i++) {
            arrlableForSignUpUser.push(data.data[i].DateColumn);
            arrdataForSignUpUser.push(data.data[i].TotalCount);
        }
        CountSignUpUser(arrlableForSignUpUser, arrdataForSignUpUser);
    },
    error: function (xhr) {
        alert('error');
    }
});
}

function CountSignUpUser(arrlableForSignUpUser, arrdataForSignUpUser) {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: arrlableForSignUpUser,
        datasets: [{
            label: 'Successfull Sign-Ups',
            data: arrdataForSignUpUser,
            //backgroundColor: "rgba(153,255,51,1)"
            backgroundColor: '#34999c'
        }]
    },
});
}

这是我对绑定数据周过滤器调用=＆gt;

function FilterCharts() { 
   FilterType = $("#ddlFilter option:selected").val();       
    LoadCharts(FilterType );
}

使用此代码我已经成功获得了show chart.but这里我遇到了上述代码的问题。所以，请帮助我，我的问题在哪里。

Answer 1

我在这个帖子上得到解决方案我自己只需要在每次创建新图表时销毁myChart变量。并且还声明全局变量以便进行访问。

像这样在js =＆gt;

中声明全局变量

exec(sys.stdin.read(), {})

并在创建图表时检查这个条件时间=＆gt;

var myChart = '';

因此，每次创建图表时都使用此条件并删除所有旧数据。

如何使用mvc c＃在鼠标悬停时从Chart js中删除旧数据？

1 个答案: