Câu hỏi chart.js tải dữ liệu hoàn toàn mới


API cho chart.js cho phép một điểm chỉnh sửa các tập dữ liệu được tải vào nó, ví dụ:

.update( )

Bản cập nhật gọi () trên cá thể Biểu đồ của bạn sẽ hiển thị lại biểu đồ   bất kỳ giá trị được cập nhật nào, cho phép bạn chỉnh sửa giá trị của nhiều   các điểm hiện có, sau đó hiển thị các điểm đó trong một vòng lặp kết xuất động.

.addData( valuesArray, label )

Gọi addData (valuesArray, label) trên thể hiện Chart của bạn đi qua một   mảng giá trị cho mỗi tập dữ liệu, cùng với nhãn cho các điểm đó.

.removeData( )

Gọi removeData () trên cá thể Biểu đồ của bạn sẽ xóa mục đầu tiên   giá trị cho tất cả các tập dữ liệu trên biểu đồ.

Tất cả những điều này đều tuyệt vời, nhưng tôi không thể tìm ra cách tải một tập dữ liệu hoàn toàn mới vào, xóa sạch tập dữ liệu cũ. Các tài liệu dường như không bao gồm này.


66
2017-07-16 16:15


gốc




Các câu trả lời:


Tôi có vấn đề lớn với điều này

Đầu tiên tôi đã thử .clear() sau đó tôi đã thử .destroy() và tôi đã thử đặt tham chiếu biểu đồ của mình thành null

Điều cuối cùng đã khắc phục vấn đề cho tôi: xóa <canvas> và sau đó reappending new <canvas> vào vùng chứa chính


Có hàng triệu cách để thực hiện việc này:

var resetCanvas = function () {
  $('#results-graph').remove(); // this is my <canvas> element
  $('#graph-container').append('<canvas id="results-graph"><canvas>');
  canvas = document.querySelector('#results-graph'); // why use jQuery?
  ctx = canvas.getContext('2d');
  ctx.canvas.width = $('#graph').width(); // resize to parent width
  ctx.canvas.height = $('#graph').height(); // resize to parent height

  var x = canvas.width/2;
  var y = canvas.height/2;
  ctx.font = '10pt Verdana';
  ctx.textAlign = 'center';
  ctx.fillText('This text is centered on the canvas', x, y);
};

74
2017-07-31 16:14



Câu trả lời này hoạt động, nhưng tôi tìm thấy phá hủy cũng hoạt động trong phiên bản mới nhất. Được đề xuất trên bài đăng này - github.com/nnnick/Chart.js/issues/559 - HockeyJ
nó sẽ giúp trống div đồ thị-container để loại bỏ iframe cũ $ ('# results-graph'). remove (); $ ('# graph-container'). trống (); $ ('# graph-container'). chắp thêm ('<canvas id = "results-graph"> <canvas>'); - heyyan khan
phá hủy đang làm việc cho tôi. - mnhmilu
nhờ tiêu diệt đang làm việc cho tôi. - Ganesh Patil
hoạt động hoàn hảo cho phiên bản 1 - Amrit Shrestha


Bạn cần phải tiêu diệt:

myLineChart.destroy();

Sau đó, khởi tạo lại biểu đồ:

var ctx = document.getElementById("myChartLine").getContext("2d");
myLineChart = new Chart(ctx).Line(data, options);

50
2017-11-17 22:34



chỉ cần sử dụng nó như thế này nếu (window.myLine) {window.myLine.destroy (); } HOẶC nếu (myLineChart) {myLineChart.destroy (); } - jayant singh
Có thể xác nhận phá hủy sau đó khởi tạo lại không gây ra bất kỳ nhấp nháy nào và có vẻ như các điểm dữ liệu đã được cập nhật động - Titan


Với Chart.js V2.0 bạn có thể làm như sau:

websiteChart.config.data = some_new_data;
websiteChart.update();

29
2018-04-29 18:51



Điều này sẽ không hoạt động đối với thay đổi loại. - supergentle
Nhưng điều này hoạt động khi chỉ có dữ liệu được thay đổi. - Ben
Chính xác những gì op yêu cầu. - Perry
Khi tôi làm chart.config.data = newData, Tôi có lỗi này: TypeError: undefined is not an object (evaluating 'i.data.datasets.length')  Ai đó có cùng một vấn đề? - Benjamin Lucidarme


Giải pháp của tôi cho điều này khá đơn giản. (VERSION 1.X)

getDataSet:function(valuesArr1,valuesArr2){
        var dataset = [];
        var arr1 = {
            label: " (myvalues1)",
            fillColor: "rgba(0, 138, 212,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(0, 138, 212,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: valuesArr1
        };
        var arr2 = {
            label: " (myvalues2)",
            fillColor: "rgba(255, 174, 087,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(255, 174, 087,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: valuesArr2
        };
        /*Example conditions*/
        if(condition 1)
          dataset.push(arr1);
        }
        if(condition 2){
          dataset.push(arr1);
          dataset.push(arr2);
        }

        return dataset;
    }

var data = {
    labels: mylabelone,
    datasets: getDataSet()
};
if(myBarChart != null) // i initialize myBarChart var with null
    myBarChart.destroy(); // if not null call destroy
    myBarChart = new Chart(ctxmini).Bar(data, options);//render it again ...

Không nhấp nháy hoặc có vấn đề. getDataSet là một hàm để kiểm soát dữ liệu nào tôi cần trình bày


10
2018-01-18 10:36



Bạn có thể thêm đoạn mã của getDataSet () không? - Gotham's Reckoning
Thêm ví dụ getDataSet () - Henrique C.


Đó là một chuỗi cũ, nhưng trong phiên bản hiện tại (tính đến 1-feb-2017), nó dễ dàng thay thế các tập dữ liệu được vẽ trên biểu đồ.js:

giả sử các giá trị trục x mới của bạn nằm trong các giá trị mảng x và y-trục nằm trong mảng y, bạn có thể sử dụng mã bên dưới để cập nhật biểu đồ.

var x = [1,2,3];
var y = [1,1,1];

chart.data.datasets[0].data = y;
chart.data.labels = x;

chart.update();

10
2018-02-01 13:44



Cảm ơn bạn, điều này hoạt động hoàn hảo. - Fuledbyramen
Cảm ơn một tấn, Man! Đã lãng phí cả ngày. Cuối cùng vấp phải câu trả lời của bạn. Cảm ơn bạn. - Dronacharya


Tôi đã trả lời câu hỏi này tại đây Làm cách nào để xóa biểu đồ khỏi canvas để không thể kích hoạt sự kiện di chuột?

Nhưng đây là giải pháp:

var myPieChart=null;

function drawChart(objChart,data){
    if(myPieChart!=null){
        myPieChart.destroy();
    }
    // Get the context of the canvas element we want to select
    var ctx = objChart.getContext("2d");
    myPieChart = new Chart(ctx).Pie(data, {animateScale: true});
}

6
2018-06-05 23:19





Theo tài liệu, clear() xóa canvas. Hãy nghĩ về nó như công cụ Eraser trong Paint. Nó không có gì để làm với dữ liệu hiện đang được nạp trong thể hiện biểu đồ.

Phá hủy trường hợp và tạo ra một trường hợp mới là lãng phí. Thay vào đó, hãy sử dụng các phương pháp API removeData() và addData(). Chúng sẽ thêm / xóa một phân đoạn duy nhất đến / từ thể hiện biểu đồ. Vì vậy, nếu bạn muốn tải dữ liệu hoàn toàn mới, chỉ cần lặp mảng dữ liệu biểu đồ và gọi removeData(index) (các chỉ mục mảng phải tương ứng với các chỉ mục phân đoạn hiện tại). Sau đó sử dụng addData(index) để điền nó với dữ liệu mới. Tôi đề nghị gói hai phương thức để lặp lại dữ liệu, vì chúng mong đợi một chỉ mục phân đoạn duy nhất. tôi sử dụng resetChart và updateChart. Trước khi tiếp tục, hãy đảm bảo bạn kiểm tra Chart.js phiên bản và tài liệu mới nhất. Họ có thể đã thêm các phương pháp mới để thay thế hoàn toàn dữ liệu.


5
2017-11-18 18:56



Tôi thích câu trả lời của bạn và nó phù hợp với thông tin tôi đã đọc trực tuyến. Nếu bạn có thể hiển thị và ví dụ đó sẽ thực sự hữu ích. Hai ví dụ mà tôi đã thấy trực tuyến tương tự là: jsbin.com/yitep/5/edit?html,js,output và jsbin.com/yitep/4/edit?html,js,output - Rethabile
Vấn đề duy nhất là việc cập nhật biểu đồ trở nên cực kỳ cồng kềnh và siêu chậm nếu bạn phải thay thế dữ liệu biểu đồ với một tập dữ liệu hoàn toàn khác. Đối với người mới bắt đầu, tôi đã không tìm thấy cách cập nhật trục x hiện tại nhãn. Phá hủy và phục hồi toàn bộ biểu đồ là giải pháp thực sự duy nhất trong hoàn cảnh như vậy. - deceze♦
Thật không may, tôi chỉ xử lý một biểu đồ Donut, ít phức tạp hơn. Bạn đã xem API mới nhất chưa? - adi518