动态创建的折线图保存以前的数据值

时间：2017-08-08 06:53:59

标签： javascript jquery chart.js

我使用chart.js绘制线图。当更改过滤器时（在ajax调用之后），应根据过滤器更改图形。虽然图形已更改，但是当我将鼠标指针移动到图形上时，图形会不断更改 - 有时会显示新图表，有些时刻会显示上一个图表。

这是我的代码::: 

   var data = {
                    labels: month,
                    datasets: [
                        {
                            label: "Sanitation",
                            fillColor: "rgba(255,0,0,0.2)",
                            strokeColor: "rgba(255,0,0,1)",
                            pointColor: "rgba(255,0,0,1)",
                            pointStrokeColor: "#e74c3c",
                            pointHighlightFill: "#e74c3c",
                            pointHighlightStroke: "rgba(255,0,0,4)",
                            data: sanitationvalue
                        },
                        {
                            label: "School Environment",
                            fillColor: "rgba(255,255,0,0.2)",
                            strokeColor: "rgba(255,255,0,1)",
                            pointColor: "rgba(255,255,0,1)",
                            pointStrokeColor: " #fcf3cf",
                            pointHighlightFill: " #fcf3cf",
                            pointHighlightStroke: "rgba(255,255,0,4)",
                            data: environmentvalue
                        },
                        {
                            label: "Sports and Recreation",
                            fillColor: "rgba(0,0,255,0.2)",
                            strokeColor: "rgba(0,0,255,1)",
                            pointColor: "rgba(0,0,255,1)",
                            pointStrokeColor: " #85c1e9",
                            pointHighlightFill: " #85c1e9",
                            pointHighlightStroke: "rgba(0,0,255,4)",
                            data: recreationvalue
                        },
                        {
                            label: "Water",
                            fillColor: "rgba(0,255,0,0.2)",
                            strokeColor: "rgba(0,255,0,1)",
                            pointColor: "rgba(0,255,0,1)",
                            pointStrokeColor: " #abebc6",
                            pointHighlightFill: " #abebc6",
                            pointHighlightStroke: "rgba(0,255,0,1)",
                            data: watervalue
                        }
                    ]
                };
                var ctx = null;
                $("#lineChart1").html("");
                //ctx = document.getElementById("lineChart1").innerHTML("");
                ctx = document.getElementById("lineChart1").getContext("2d");
                var options = { };
                var lineChart = null;
                lineChart = new Chart(ctx).Line(data, options);
                lineChart.update();

HTML :: 

<div class="col-md-6 pull-left">
                <canvas id="lineChart1" height="450" width="800"></canvas>
            </div>

2 个答案:

答案 0 :(得分：0)

试试这个希望它会起作用

$('#lineChart1').empty();
  var data = {
    labels: month,
    datasets: [
    {
        label: "Sanitation",
        fillColor: "rgba(255,0,0,0.2)",
        strokeColor: "rgba(255,0,0,1)",
        pointColor: "rgba(255,0,0,1)",
        pointStrokeColor: "#e74c3c",
        pointHighlightFill: "#e74c3c",
        pointHighlightStroke: "rgba(255,0,0,4)",
        data: sanitationvalue
    },
    {
        label: "School Environment",
        fillColor: "rgba(255,255,0,0.2)",
        strokeColor: "rgba(255,255,0,1)",
        pointColor: "rgba(255,255,0,1)",
        pointStrokeColor: " #fcf3cf",
        pointHighlightFill: " #fcf3cf",
        pointHighlightStroke: "rgba(255,255,0,4)",
        data: environmentvalue
    },
    {
        label: "Sports and Recreation",
        fillColor: "rgba(0,0,255,0.2)",
        strokeColor: "rgba(0,0,255,1)",
        pointColor: "rgba(0,0,255,1)",
        pointStrokeColor: " #85c1e9",
        pointHighlightFill: " #85c1e9",
        pointHighlightStroke: "rgba(0,0,255,4)",
        data: recreationvalue
    },
    {
        label: "Water",
        fillColor: "rgba(0,255,0,0.2)",
        strokeColor: "rgba(0,255,0,1)",
        pointColor: "rgba(0,255,0,1)",
        pointStrokeColor: " #abebc6",
        pointHighlightFill: " #abebc6",
        pointHighlightStroke: "rgba(0,255,0,1)",
        data: watervalue
    }
    ]
};
var ctx = null;
$("#lineChart1").html("");
                //ctx = document.getElementById("lineChart1").innerHTML("");
                ctx = document.getElementById("lineChart1").getContext("2d");
                var options = { };
                var lineChart = null;
                lineChart = new Chart(ctx).Line(data, options);
                lineChart.update();

答案 1 :(得分：0)

我已经通过添加两行来解决它：

$('#lineDiv').html('');
 $('#lineDiv').html('<canvas id="lineChart1" height="450" width="800"></canvas>');

以下是完整的代码：

 var data = {
                        labels: month,
                        datasets: [
                            {
                                label: "Sanitation",
                                fillColor: "rgba(255,0,0,0.2)",
                                strokeColor: "rgba(255,0,0,1)",
                                pointColor: "rgba(255,0,0,1)",
                                pointStrokeColor: "#e74c3c",
                                pointHighlightFill: "#e74c3c",
                                pointHighlightStroke: "rgba(255,0,0,4)",
                                data: sanitationvalue
                            },
                            {
                                label: "School Environment",
                                fillColor: "rgba(255,255,0,0.2)",
                                strokeColor: "rgba(255,255,0,1)",
                                pointColor: "rgba(255,255,0,1)",
                                pointStrokeColor: " #fcf3cf",
                                pointHighlightFill: " #fcf3cf",
                                pointHighlightStroke: "rgba(255,255,0,4)",
                                data: environmentvalue
                            },
                            {
                                label: "Sports and Recreation",
                                fillColor: "rgba(0,0,255,0.2)",
                                strokeColor: "rgba(0,0,255,1)",
                                pointColor: "rgba(0,0,255,1)",
                                pointStrokeColor: " #85c1e9",
                                pointHighlightFill: " #85c1e9",
                                pointHighlightStroke: "rgba(0,0,255,4)",
                                data: recreationvalue
                            },
                            {
                                label: "Water",
                                fillColor: "rgba(0,255,0,0.2)",
                                strokeColor: "rgba(0,255,0,1)",
                                pointColor: "rgba(0,255,0,1)",
                                pointStrokeColor: " #abebc6",
                                pointHighlightFill: " #abebc6",
                                pointHighlightStroke: "rgba(0,255,0,1)",
                                data: watervalue
                            }
                        ]
                    };
                    var ctx = null;

                    $('#lineDiv').html('');
                    $('#lineDiv').html('<canvas id="lineChart1" height="450" width="800"></canvas>');
                    ctx = document.getElementById("lineChart1").getContext("2d");
                    var options = { };
                    var lineChart = null;
                    lineChart = new Chart(ctx).Line(data, options);
                    lineChart.update();

Html是：

<div class="col-md-6 pull-left" id="lineDiv">
                <canvas id="lineChart1" height="450" width="800"></canvas>
            </div>
相关问题
最新问题