Chart.js загружает совершенно новые данные

Ответ 1

У меня были огромные проблемы с этим

Сначала я попробовал .clear(), тогда я попробовал .destroy(), и я попытался установить ссылку на диаграмму на нуль

Что окончательно устранило проблему для меня: удаление элемента <canvas>, а затем повторное использование нового <canvas> в родительском контейнере

Есть миллион способов сделать это:

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

Ответ 2

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

myLineChart.destroy();

Затем повторите инициализацию диаграммы:

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

Ответ 3

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

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

Ответ 4

Это старый поток, но в текущей версии (начиная с 1-фев-2017) легко заменить наборы данных, построенные на chart.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();

Ответ 5

Мое решение довольно просто. (ВЕРСИЯ 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 - это функция для контроля того, какой набор данных мне нужно представить

Ответ 6

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

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

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

Ответ 7

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

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

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

Ответ 8

Согласно документам, clear() очищает холст. Подумайте об этом как инструмент Eraser в Paint. Он не имеет ничего общего с данными, которые в настоящее время загружаются в экземпляре диаграммы.

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

Ответ 9

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

// 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();

Ответ 10

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

var chart;

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

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

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

Ответ 11

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

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

Ответ 12

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

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

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

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

Ответ 13

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

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

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

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

Ответ 14

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

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

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

Ответ 15

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

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

Ответ 16

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

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

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

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

Chart(ctx).Bar(dataNew);

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

Ответ 17

Диаграмма JS 2.0

Просто установите chart.data.labels = [];

Например:

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
       dataset.data.push(data);
    });
    chart.update();
}

$chart.data.labels = [];

$.each(res.grouped, function(i,o) {
   addData($chart, o.age, o.count);
});
$chart.update();