добавить в подсказку дополнительные значения из массива

Question

хорошо ... Я новичок в HighCharts.Я прочитал все посты, но все еще не могу понять, как отобразить дополнительные данные во всплывающей подсказке.

Я создал быстрый пример построения 2D-диаграммы, первые 2 столбца - x и y, а остальные 3 столбца -дополнительную информацию, которую я хочу отобразить на всплывающей подсказке https://jsfiddle.net/oscjara/0qnwxgsh/

Highcharts.chart('container', {
tooltip: {
  shared: false,
  headerFormat: '<b>{series.name}</b><br>',
  valueDecimals: 2,
  formatter: function() {
    return '<b>' + this.series.name + '</b><br>' +
      'X: ' + this.x + ' - ' +
      'Y: ' + this.y + '<br>'+
      'Z: ' + this.z;
  }
 },
  series: [{
      data: [
          [0,      29.9,    0.21,    125.54,    -0.2],
          [1.2,    71.5,    0.25,    254.01,    -21.2],
          [...,    ...,     ...,     ...,       ...]]
  }]
 });

Массив представляет собой график 2D с дополнительной информацией, это не для3D-диаграмма или многомерный график.

Любая помощь будет высоко оценена.

Answer 1

Вам нужно изменить массив массива на массив объекта

series: [{
  data: [
    {x:0, y:29.9, z:0.21},

Тогда вы можете обратиться к z, используя this.point.z

formatter: function() {
  return '<b>' + this.series.name + '</b><br>' +
    'X: ' + this.x + ' - ' +
    'Y: ' + this.y + '<br>'+
    'Z: ' + this.point.z;
}

Редактировать

Чтобы изменить данные:

data.forEach(point => {
  var coords = {
    x: point[0],
    y: point[1],
    z: point[2]
  };
  parsedData.push(coords);
});

Обновленная скрипка

Answer 2

@ Core972 спасибо за помощь ... Вот как я понял, что индексирование массива может быть доступно для всплывающей подсказки.@Murtaza также благодарит за интерес.

Я установил цикл для индексации ряда, и, когда x и y совпадают, дополнительные значения присваиваются локальным переменным a, b, c и d.

        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            valueDecimals: 2,
            formatter: function() {
                var a, b, c, d;
                for (var i = 0; i < series.length; i++){
                    if( (series[i][0] === this.x) && series[i][1] === this.y)
                    {
                        a = series[i][2];
                        b = series[i][3];
                        c = series[i][4];
                        d = series[i][5];
                        break;
                    }
                }
                return  this.series.name + '<br>'
                        + 'x:' + x + ' y:' + y + '<br>'
                        + 'a:' + a + '<br>'
                        + 'b:' + b + '<br>'
                        + 'c:' + c + '<br>'
                        + 'd:' + d + '<br>'
            }
        },

Answer 3

найдите прилагаемую скрипку для рендеринга трехмерных данных с использованием таблицы hightchart.

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'scatter',
    options3d: {
      enabled: true,
      alpha: 15,
      beta: 15,
      depth: 200,
      viewDistance: 5,
      frame: {
        bottom: {
          size: 1,
          color: 'rgba(0,0,0,0.05)'
        }
      }
    }
  },
  tooltip: {
    shared: false,
    headerFormat: '<b>{series.name}</b><br>',
    valueDecimals: 2,
    formatter: function() {
      return '<b>' + this.series.name + '</b><br>' +
        'X: ' + this.x + ' - ' +
        'Y: ' + this.y + '<br>' +
        'Z: ' + this.point.z;
    }
  },
  title: {
    text: 'Chart with rotation on angles  demo'
  },
  subtitle: {
    text: 'Test options by dragging the sliders below'
  },
  series: [{
    data: [
      [0, 29.9, 0.21],
      [1.2, 71.5, 0.25],
      [2, 59.9, 0.61],
      [3, 39.9, 0.11],
    ]
  }]
});


function showValues() {
  $('#alpha-value').html(chart.options.chart.options3d.alpha);
  $('#beta-value').html(chart.options.chart.options3d.beta);
  $('#depth-value').html(chart.options.chart.options3d.depth);
}

// Activate the sliders
$('#sliders input').on('input change', function() {
  chart.options.chart.options3d[this.id] = parseFloat(this.value);
  showValues();
  chart.redraw(false);
});

showValues();

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="height: 400px"></div>
<div id="sliders">
  <table>
    <tr>
      <td>Alpha Angle</td>
      <td><input id="alpha" type="range" min="0" max="45" value="15" /> <span id="alpha-value" class="value"></span></td>
    </tr>
    <tr>
      <td>Beta Angle</td>
      <td><input id="beta" type="range" min="-45" max="45" value="15" /> <span id="beta-value" class="value"></span></td>
    </tr>
    <tr>
      <td>Depth</td>
      <td><input id="depth" type="range" min="20" max="100" value="50" /> <span id="depth-value" class="value"></span></td>
    </tr>
  </table>
</div>

Дайте мне знать, если это поможет.

Спасибо:)