Highcharts - redraw () против нового Highcharts.chart

javascript highcharts

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

});​

http://jsfiddle.net/sUXsu/18/

[редактировать]:

Для любых будущих читателей этого вопроса стоит отметить, что нет способа скрыть и показать dataLabels. Ниже показано, как это сделать: http://jsfiddle.net/supertrue/tCF8Y/

Автор: RobinL Источник Размещён: 12.11.2019 09:16

Ответы (4)

79 плюса

Решение

chart.series[0].setData(data,true);

Сам setDataметод вызовет метод перерисовки

Автор: karthik - LK Размещён: 15.03.2013 10:40

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

http://jsfiddle.net/NxEnH/8/

Автор: Sandip Размещён: 25.06.2016 06:47

0 плюса

@RobinL, как упоминалось в предыдущих комментариях, вы можете использовать chart.series [n] .setData (). Во-первых, вам нужно убедиться, что вы присвоили экземпляр диаграммы переменной диаграммы, чтобы она приняла все свойства и методы, необходимые для доступа к диаграмме и управления ею.

Я также использовал второй параметр setData () и имел значение false, чтобы предотвратить автоматический рендеринг диаграммы. Это потому, что у меня есть несколько рядов данных, поэтому я скорее обновлю каждый из них с render = false, а затем запусту chart.redraw (). Это умноженная производительность (у меня 10 000-100 000 точек данных и я обновляю набор данных каждые 50 миллисекунд).

Автор: lauri108 Размещён: 04.04.2018 02:31
Вопросы из категории :
32x32