Highcharts отсутствует информация в диаграмме рассеяния CSV/XLS при экспорте

При экспорте данных точечной/пузырьковой диаграммы в формате CSV или XLS отсутствует ключевая информация, см., например: http://jsfiddle.net/11fum86u/

Это данные (выдержка):

series: [{
    data: [
        { x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium' },

И названия осей находятся во всплывающей подсказке (но, возможно, их нужно определить в другом месте):

tooltip: {
    pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
        '<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
        '<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
        '<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',

Чего не хватает в экспорте по умолчанию, так это (i) метки для осей y и z и (ii) названия кружков (в этом примере коды/названия стран).

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


person Fred    schedule 10.10.2017    source источник


Ответы (1)


На самом деле в пузырьковых диаграммах нет оси z. Это довольно запутанно, потому что все точки имеют свойство z. Это свойство служит для вычисления размера пузырька, поэтому дополнительная ось не требуется, поскольку все находится в 2D. zAxis используется в трехмерных диаграммах.

См. этот рабочий пример: http://jsfiddle.net/kkulig/udtr0emL/

Вы можете обрабатывать метки первой строки через columnHeaderFormatter (http://api.highcharts.com/highcharts/exporting.csv.columnHeaderFormatter):

exporting: {
    csv: {
      columnHeaderFormatter: function(item, key, keyLength) {
        if (item.axisTitle) {
          return item.axisTitle.textStr; // x axis label
        } else if (key === 'y') {
          return item.yAxis.axisTitle.textStr; // y axis label
        } else if (key === 'z') {
          return 'Obesity (adults)'; // z axis label
        }
      }
    }
  }

Чтобы добавить еще один столбец (страны), в эти три основные функции добавлены следующие фрагменты кода:

<сильный>1. Highcharts.Chart.prototype.getDataRows

// add original point reference
rows[key].point = point;

<сильный>2. Highcharts.Chart.prototype.getCSV

  // Add point name and header
  csv += itemDelimiter;
  var point = row['point'];
  if (point) {
    csv += point.name
  } else {
    csv += "Country"
  }

<сильный>3. Highcharts.Chart.prototype.getTable (для XLS)

  var point = row['point'],
    val;
  if (point) {
    val = point.name;
  } else {
    val = "Country";
  }

  html += '<' + tag + ' class="text">' +
    (val === undefined ? '' : val) + '</' + tag + '>';

Все функции доступны в export-data.src.js в этом каталоге: https://github.com/highcharts/highcharts/tree/b4b4221b19a3a50d9ed613b6f50b12f0afcc7d06/js/modules

person Kamil Kulig    schedule 11.10.2017
comment
Фантастика, именно то, что мне нужно, большое спасибо. Есть ли шанс включить этот дополнительный столбец в экспорт XLS? - person Fred; 11.10.2017
comment
@Kamil это изменение будет отражать основные функции, и, следовательно, названия стран будут перечислены дважды при экспорте гистограмм. Верно? - person Rohan Kumar; 12.10.2017
comment
@RohanKumar, это зависит от того, как выглядят ваши данные. Этот код добавляет еще один столбец независимо от остальных данных. - person Kamil Kulig; 16.10.2017
comment
@Fred Я добавил список для XLS и обновил скрипку. - person Kamil Kulig; 16.10.2017