таблица.загрузка скриптов совершенно новые данные

вам нужно уничтожить:

myLineChart.destroy();

затем повторно инициализировать графику:

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

С Диаграммы.js V2. 0 вы можете сделать следующее:

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

мое решение этого довольно просто. (Версия 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 ...

нет мерцания или проблем. getDataSet это функция для управления тем, какой набор данных мне нужно представить

Это старый поток, но в текущей версии (по состоянию на 1-фев-2017) он легко заменяет наборы данных, построенные на диаграмме.js:

Предположим ваш новый X-ось значений в массиве X и оси Y в массив y, вы можете использовать ниже код для обновления диаграммы.

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

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

chart.update();

Я ответил на это здесь см. Как очистить диаграмму от холста, чтобы события наведения не могли быть вызваны?

но вот решение:

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});
}

согласно документам,clear() очищает холст. Думайте об этом как ластик инструмент в краске. Это не имеет ничего общего с данными, загруженными в данный момент в экземпляр диаграммы.

уничтожение экземпляра и создание нового-это расточительство. Вместо этого используйте методы API removeData() и addData(). Они добавят / удалят один сегмент в / из экземпляра диаграммы. Поэтому, если вы хотите загрузить совершенно новые данные, просто зациклите массив данных диаграммы и вызовите removeData(index) (индексы массива должны соответствовать индексы текущих сегментов). Затем используйте addData(index) чтобы заполнить его новыми данными. Я предлагаю обернуть два метода для циклической обработки данных, поскольку они ожидают один индекс сегмента. Я использую resetChart и updateChart. прежде чем продолжить, убедитесь, что вы проверить Chart.js последняя версия и документация. Возможно, они добавили новые методы для полной замены данных.

я столкнулся с той же проблемой, у меня есть 6 круговых диаграмм на странице, которые могут быть обновлены одновременно. Я использую следующую функцию для сброса данных диаграммы.

// sets chart segment data for previously rendered charts
function _resetChartData(chart, new_segments) {
    // remove all the segments
    while (chart.segments.length) {
        chart.removeData();
    };

    // add the new data fresh
    new_segments.forEach (function (segment, index) {
        chart.addData(segment, index);
    });
};

// when I want to reset my data I call
_resetChartData(some_chart, new_data_segments);
some_chart.update();

вам нужно очистить старые данные. Нет необходимости повторно инициализировать:

for (i in myChartLine.datasets[0].points)
    myChartLine.removeData();

пробовал neaumusic решение, но позже узнал, что единственная проблема с уничтожением-это область.

var chart;

function renderGraph() {
    // Destroy old graph
    if (chart) {
        chart.destroy();
    }

    // Render chart
    chart = new Chart(
        document.getElementById(idChartMainWrapperCanvas),
        chartOptions
    );
}

перемещение моей переменной диаграммы за пределы области действия функции, заставило ее работать на меня.

ChartJS 2.6 поддерживает замену ссылок на данные (см. Примечание в документации по обновлению (конфигурации). Поэтому, когда у вас есть диаграмма, вы можете просто сделать это:

myChart.data.labels = ['1am', '2am', '3am', '4am'];
myChart.data.datasets[0].data = [0, 12, 35, 36];
myChart.update();

он не делает анимацию, которую вы получите от добавления точек, но существующие точки На графике будут анимированы.

если кто-то ищет, как это сделать в React. Для линейной диаграммы, предполагая, что у вас есть компонент оболочки вокруг диаграммы:

(это предполагает, что вы используете v2. Вам не нужно использовать react-chartjs. Это использование нормального chart.js пакет от НПМ.)

propTypes: {
  data: React.PropTypes.shape({
    datasets: React.PropTypes.arrayOf(
      React.PropTypes.shape({

      })
    ),
    labels: React.PropTypes.array.isRequired
  }).isRequired
},
componentDidMount () {
  let chartCanvas = this.refs.chart;

  let myChart = new Chart(chartCanvas, {
    type: 'line',
    data: this.props.data,
    options: {
      ...
    }
  });

  this.setState({chart: myChart});
},
componentDidUpdate () {
    let chart = this.state.chart;
    let data = this.props.data;

    data.datasets.forEach((dataset, i) => chart.data.datasets[i].data = dataset.data);

    chart.data.labels = data.labels;
    chart.update();
},
render () {
  return (
    <canvas ref={'chart'} height={'400'} width={'600'}></canvas>
  );
}

The componentDidUpdate функциональность позволяет обновлять, добавлять или удалять любые данные из тега this.props.data.

ни один из приведенных выше ответов не помог моей конкретной ситуации очень чистым способом с минимальным кодом. Мне нужно было удалить все наборы данных, а затем циклически добавить несколько наборов данных динамически. Так что это обрезается для тех, кто делает это весь путь к нижней части страницы, не находя их ответ :)

Примечание: не забудьте вызвать диаграмму.update() после загрузки всех новых данных в объект dataset. Надеюсь, это поможет кому-то

function removeData(chart) {
   chart.data.datasets.length = 0;
}

function addData(chart, data) {
  chart.data.datasets.push(data);
}

единственное решение, которое я могу найти до сих пор для себя,-это повторно инициализировать диаграмму с нуля:

var myLineChart = new Chart(ctx).Line(data, options);

однако это кажется мне немного Хоки. Лучше, более стандартное решение кто-нибудь?

У меня тоже было много проблем с этим. У меня есть данные и метки в отдельных массивах, а затем я повторно инициализирую данные диаграммы. Я добавил строчку.уничтожить (); как было предложено выше, который сделал трюк

var ctx = document.getElementById("canvas").getContext("2d");
if(window.myLine){
	window.myLine.destroy();
}
window.myLine = new Chart(ctx).Line(lineChartData, {
  etc
  etc

здесь - это способ сделать это без очистки холста или начать заново, но вы должны человек обрабатывать создание диаграммы, так что данные в том же формате, когда вы обновляете.

вот как я это сделал.

    var ctx = document.getElementById("myChart").getContext("2d");
    if (chartExists) {
        for (i=0;i<10;i++){
            myNewChart.scale.xLabels[i]=dbLabels[i]; 
            myNewChart.datasets[0].bars[i].value=dbOnAir[i];
        }
        myNewChart.update();
      }else{
          console.log('chart doesnt exist');
          myNewChart = new Chart(ctx).Bar(dataNew);
          myNewChart.removeData();
          for (i=0;i<10;i++){
              myNewChart.addData([10],dbLabels[i]);
          }
          for (i=0;i<10;i++){      
              myNewChart.datasets[0].bars[i].value=dbOnAir[i];
          }
          myNewChart.update();
          chartExists=true;
        }

Я в основном ломаю данные, загруженные при создании, а затем реформирую с помощью метода add data. Это означает, что я могу получить доступ ко всем точкам. Всякий раз, когда я пытался получить доступ к структуре данных, которая создается в:

Chart(ctx).Bar(dataNew);

команда, я не могу получить доступ к тому, что мне нужно. Это означает, что вы можете изменить все точки данных, так же, как вы их создали, а также вызвать update() без полной анимации с нуля.