Хранение Highcharts в выпуске массива

Question

Я строю несколько старших диаграмм динамически в цикле и помещаю каждую верхнюю диаграмму в массив. Чтобы при нажатии на внешнюю кнопку я мог экспортировать графики. Но при нажатии диаграмм в массиве только последняя запись корректно устанавливается с параметрами.

У меня была ссылка на скрипку, которая предлагает клонировать варианты. [https://jsfiddle.net/ndb21y1w/][2]

https://www.highcharts.com/forum/viewtopic.php?t=38574

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

Добавление большей ясности к вопросу: данные динамически заполняются в цикле. Моя логика кода выглядит следующим образом:

counter i; 
setInterval(function() {
//logic to populated data...
//It is a multiline chart, so three sets of arrays are populated. 
//filling data1[], data2[] and data3[] .
drawChart(data1, data2, data3);
if(condition true) clearInterval();
i++;
});

drawChart(data1, data2, data3) {
var chart = new Highcharts.Chart({
 title: {
            text: "title",
        },
        xAxis: {
            categories: [1,2,3,4...],
        },
    series: [{
        type: 'line',
        data: data1,
    }, {
        type: 'line',
        data: data2,
    }, {
        type: 'line',
        data: data3,
    },
});
chartArray.push(chart);
}

В этом массиве chartArray я упоминал о том, чтобы получить последнюю запись только правильно.

Answer 1

Чтобы создать диаграмму, вы должны передать HTML-элемент, который будет контейнером диаграммы. В твоем коде то чего не хватает. Проверьте демонстрацию, которую я подготовил для воспроизведения этой проблемы: https://jsfiddle.net/BlackLabel/c60y1t2v/

Код:

var chartArray = [],
  counter = 1,
  dataArr = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ],
  containers = document.getElementById('containers');

function drawChart(data) {
  var cnt = document.createElement('div'),
    cntId = 'container' + counter++,
    chart;

  cnt.setAttribute('id', cntId);
  containers.appendChild(cnt);

  chart = new Highcharts.Chart(cntId, {
    title: {
      text: "title",
    },
    xAxis: {
      categories: [1, 2, 3, 4],
    },
    series: [{
      type: 'line',
      data: data,
    }]
  });

  return chart;
}

dataArr.forEach(function(data) {
  var chart = drawChart(data);

  chartArray.push(chart);
});

Answer 2

Сохраните параметры диаграммы в Array, затем сопоставьте с Инициализировать верхнюю диаграмму для каждого параметра.

var chartArray = [];

function drawChart(data1, data2, data3, i) {
// Create container for charts
const el = document.createElement('div');
document.body.appendChild(el).setAttribute("id", "container"+i);

// Create charts
var chart = new Highcharts.chart(el, {
  series: [{
    type: 'line',
    data: data1,
  }, {
    type: 'line',
    data: data2,
  }, {
    type: 'line',
    data: data3,
  }]
});
chartArray.push(chart);
console.log(chartArray);
}

var counter = 0;
var delayTime = 2000;
var timer = setInterval(function(){
  var data1 = [30, 70, 50];
  var data2 = [40, 70, 60];
  var data3 = [10, 90, 20];
  drawChart(data1, data2, data3, counter);
  if(counter == 2){
    clearInterval(timer);
  }
  counter++;
},delayTime);

<script src="https://code.highcharts.com/highcharts.js"></script>

Answer 3

Для печати HTML как PDF вы можете использовать это программное обеспечение " wkhtmltopdf "

в Linux вам нужно использовать эту команду:

sudo apt-get install wkhtmltopdf

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

---

Библиотека для PHP: https://github.com/mikehaertl/phpwkhtmltopdf

Answer 4

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

const options = [...Array(5)].map(() => {
  const originalOptions = {
    series: [{
      data: [], // some random data
      type: 'column'
    }]
  }
  return Object.assign(originalOptions)
})

Fiddle

Обновлено:

Для динамического повторного заполненияНа диаграмме вам нужно инициализировать пустой график, а затем добавлять новые серии + перерисовку при каждом заполнении ваших данных.

Ваша функция перерисовки будет выглядеть примерно так:

var i = 0;
var data = [];

var chart = new Highcharts.Chart('container',{
    series: []
});

var interval = setInterval(function() {
i++;
data[i] = [i*10 + 1, i*10+2, i*10+3];
drawChart(data[i]);
if(i > 2) clearInterval(interval);

},1000);

function drawChart(data) {
var series = {
type: 'line',
data: data
}
chart.addSeries(series, false);
chart.redraw();
}

См. Обновленную скрипку