Я создал базовую гистограмму, используя chartjs, и она отлично работает. Теперь я хочу обновить значения на временной интервал. Моя проблема в том, что после того, как я создал график, я не знаю, как правильно обновить его значения ...
Мой код:
var ctx = $("#myChart").get(0).getContext("2d");
var dts = [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: [0, 0, 0, 0, 0]
}
];
var data = {
labels: ["Core#1", "Core#2", "Core#3", "Core#4", "Total"],
datasets: dts
};
var chart = new Chart(ctx);
chart.Bar(data);
//test code
setInterval( function () {
data.datasets[0].data = [random(), random(), random(), random(), random()];
chart.Bar(data);
},2000);в тестовом коде я обновляю значения с помощью datasets[0].data- это правильный способ сделать это? Проблема в том, что каждый раз, когда я звоню chart.Bar(), значения сбрасываются на 0, а затем анимируются на случайное значение (как будто я воссоздаю диаграмму). Таким образом, все анимации всегда имеют значение от 0 до значения, что выглядит странно. Я ожидал бы, что, если я обновлю значение с 50 до 10, планка опустится до 10 с 50 и не будет установлена в 0, а затем анимирована до 10.
Я не нашел в документации ничего по этому поводу ... я делаю что-то не так или это невозможно с этой библиотекой?
источник
Ответы:
Обновление: похоже, что chartjs был обновлен (см. Комментарий ниже). Вот несколько примеров, которые выглядят очень красиво:
Оригинальный пост
По состоянию на ноябрь 2013 года, кажется, очень мало вариантов обновления графиков.
Здесь есть хороший пример (дублируется ниже) добавления новых точек на линейный график. Все еще немного нервный, но не слишком плохой. Тем не менее, я думаю, что эффект, вероятно, зависит от графика, который вы используете.
Похоже, что это где-то в процессе разработки. Я пока не вижу никаких указаний на дату выпуска: https://github.com/nnnick/Chart.js/issues/13 [Закрыт с 26 июля 2014 г.]
JS
HTML
источник
update()Запускает обновление диаграммы. chart.update ()update()можно безопасно вызывать после обновления значений одной или нескольких существующих точек в объекте данных, отображая изменения в одном цикле анимированного рендеринга.источник
Вот как это сделать в последней версии ChartJs:
Посмотрите на это четкое видео
или проверить это в jsfiddle
источник
chart.update()оживляет от предыдущей позиции точек, как хотел OP.Вы также можете использовать функцию destroy (). Как это
источник
Вам просто нужно изменить
chartObject.data.datasetsзначение и позвонитьupdate()так:источник
Удалите холст дом и добавьте снова.
источник
Я думаю, что самый простой способ - написать функцию для обновления вашей диаграммы, включая
chart.update()метод. Посмотрите на этот простой пример, который я написал в jsfiddle для гистограммы.Надеюсь это поможет.
источник
Я не думаю, что это возможно прямо сейчас.
Однако это функция, которая должна появиться в ближайшее время, как намекнул автор: https://github.com/nnnick/Chart.js/issues/161#issuecomment-20487775
источник
Если destroy () и clear () не работают (точно так же, как у меня был опыт), вы можете использовать jquery, чтобы удалить холст и добавить его снова.
источник
Самый простой способ - заменить элемент canvas и затем снова вызвать new Chart ():
Конечно, вы должны заменить yourChartData, yourChartType и yourChartOptions правильными значениями, необходимыми для инициализации Chart.js. Смотрите Chart.js Документы .
Вы можете вызвать функцию reloadMyChart по нажатию кнопки или по любому другому необходимому вам событию. Возможно, вы добавите параметры в эту функцию и будете использовать их для вызова REST для динамического обновления диаграммы, например:
Надеюсь, поможет! знак равно
источник
Отображение графика обновления в реальном времениJS
полный код, вы можете скачать в описании ссылку
источник
Есть как минимум 2 способа решить эту проблему:
1)
chart.update()2) Удалите существующую диаграмму с помощью chart.destroy () и создайте новый объект диаграммы.
источник
Вы можете проверить экземпляр
Chartс помощьюChart.instances. Это даст вам все экземпляры графиков. Теперь вы можете перебирать эти экземпляры и изменять данные, которые присутствуют в config. Предположим, у вас есть только один график на вашей странице.источник
Так просто, просто замените элемент холста диаграммы.
источник