Highcharts - redraw () против нового Highcharts.chart
146455 просмотра
4 ответа
Я изо всех сил пытаюсь понять, как правильно обновить диаграмму хай-чартов. Предположим, я нарисовал график, а затем хочу каким-то образом обновить его. Например, я могу изменить значения ряда данных или включить метки данных.
На данный момент единственный способ выяснить, как это сделать, - это изменить параметры графика и использовать его new Highcharts.chart
для указания перерисовки старших графиков.
Тем не менее, мне интересно, может ли это быть излишним, и возможно ли изменить диаграмму «на месте», не начав с нуля new Highcharts.chart
. Я заметил, что есть redraw()
метод, но я не могу заставить его работать.
Любая помощь очень ценится.
Спасибо,
Робин
Пример кода выглядит следующим образом, а внизу находится jsFiddle.
$(document).ready(function() {
chartOptions = {
chart: {
renderTo: 'container',
type: 'area',
},
series: [{
data: [1,2,3]
}]
};
chart1 = new Highcharts.Chart(chartOptions);
chartOptions.series[0].data= [10,5,2];
chart1 = new Highcharts.Chart(chartOptions);
//The following seems to have no effect
chart1.series[0].data = [2,4,4];
chart1.redraw();
});
[редактировать]:
Для любых будущих читателей этого вопроса стоит отметить, что нет способа скрыть и показать dataLabels. Ниже показано, как это сделать: http://jsfiddle.net/supertrue/tCF8Y/
Автор: RobinL Источник Размещён: 12.11.2019 09:16Ответы (4)
79 плюса
chart.series[0].setData(data,true);
Сам setData
метод вызовет метод перерисовки
13 плюса
Вы должны вызвать set и добавить функции в объект диаграммы перед вызовом перерисовки.
chart.xAxis[0].setCategories([2,4,5,6,7], false);
chart.addSeries({
name: "acx",
data: [4,5,6,7,8]
}, false);
chart.redraw();
Автор: waqas
Размещён: 01.02.2013 10:31
9 плюса
var newData = [1,2,3,4,5,6,7];
var chart = $('#chartjs').highcharts();
chart.series[0].setData(newData, true);
Объяснение:
Переменная newData
содержит значение, которое нужно обновить в диаграмме. Переменная chart
является объектом диаграммы. setData
это метод, предоставляемый highchart для обновления данных.
Метод setData содержит два параметра, в первом параметре нам нужно передать новое значение в виде массива, а вторым параметром является логическое значение. Если true
тогда диаграмма обновляется сама, и если false
тогда мы должны использовать redraw()
метод для обновления диаграммы (то есть chart.redraw();
)
0 плюса
@RobinL, как упоминалось в предыдущих комментариях, вы можете использовать chart.series [n] .setData (). Во-первых, вам нужно убедиться, что вы присвоили экземпляр диаграммы переменной диаграммы, чтобы она приняла все свойства и методы, необходимые для доступа к диаграмме и управления ею.
Я также использовал второй параметр setData () и имел значение false, чтобы предотвратить автоматический рендеринг диаграммы. Это потому, что у меня есть несколько рядов данных, поэтому я скорее обновлю каждый из них с render = false, а затем запусту chart.redraw (). Это умноженная производительность (у меня 10 000-100 000 точек данных и я обновляю набор данных каждые 50 миллисекунд).
Автор: lauri108 Размещён: 04.04.2018 02:31Вопросы из категории :
- javascript Как определить, какой из указанных шрифтов был использован на веб-странице?
- javascript Валидация клиентской стороны ASP.Net
- javascript Длина объекта JavaScript
- javascript Получение текста из выпадающего списка
- javascript Скрипт входа со скрытыми кнопками
- javascript Как автоматически изменить размер текстовой области с помощью Prototype?
- javascript Удаление элементов с помощью Array.map в JavaScript
- javascript Прокрутка переполненных DIV с помощью JavaScript
- javascript API Карт Google - проблемы с классом GLatLngBounds
- javascript Проверка десятичных чисел в JavaScript - IsNumeric ()
- highcharts highcharts.js имеет режим отладки?
- highcharts Правильный способ удалить все данные серии из диаграммы старшего чарта?
- highcharts How to set Highcharts chart maximum yAxis value
- highcharts Как экспортировать график JavaScript в файл Excel (HighCharts)
- highcharts Highcharts DateTime Локализация
- highcharts Как выровнять центр пользовательской метки в старших чартах
- highcharts установить разные цвета для каждого столбца в старших графиках
- highcharts Столбчатая диаграмма Highcharts, переполняющая область графика
- highcharts Инвертировать ось Y в Highcharts
- highcharts Установить дополнительные данные для серии Highcharts