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

您需要将array的数组更改为object的数组

b=int(b)

然后，您可以使用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;
}

Updated Fiddle

Answer 2

请找到附属的小提琴以使用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>'
            }
        },

向工具提示添加数组中的其他值

3 个答案: