将数组中的附加值添加到工具提示

Question

好吧...我是 HighCharts 的新手。我阅读了所有 post 但我仍在努力如何在工具提示上显示其他数据。

我创建了一个绘制二维图表的快速示例，前 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

您需要将array of array 更改为array of object

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

Updated Fiddle

Answer 2

请找到附件 fiddle 使用 hightchart 渲染 3d 数据。

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>

如果有帮助请告诉我。

谢谢:)

Answer 3

@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>'
            }
        },

将数组中的附加值添加到工具提示

add to tooltip additional values from array

javascript

arrays

tooltip

highcharts