Question

我正在尝试使用HighCharts库生成蜘蛛图表。然而，我们的数据变化很大，包括一些非常小的数字和一些非常大的数据。如果显示，它们会使蜘蛛图表退化为一条线。所以我实现了一个预处理阶段，我在其中规范化每个维度的值。现在可以正确显示蜘蛛图表，但工具提示会受到影响，因为它们会显示标准化值而不是绝对值。为了跟踪这两组值，我在ttip对象中添加了一个series数组，如下所示：

$('#hcRadar').highcharts({
  ...
  series: [{
    name: 'max(rec(9))',
    data: [1.0, 0.034440171953752756, 0.9724749421689427, 0.9937086214393859, 0.021795139861960203],
    ttip: [307.54340875,-1595.182889375,5045200000.0,831.187495625,-1664.2022475],
    pointPlacement: 'on'
  }, { 
    ...
  }]    
});

现在，工具提示的格式如下：

$('#hcRadar').highcharts({
  ...
  tooltip: {
    shared: true,
    pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>'
  },
  ...
});

我发现绝对值可以在series.userOptions.ttip访问，而从中获取正确项目的索引是point.x。我想使用后者来访问第一个的正确元素，但我没有成功，因为我对JS / JSON不太熟悉。我在这个和其他网站上阅读了很多建议，但我无法解决我的问题，因为我没有得到我想要做的和错误的。你能帮我理解和解决这个问题吗？如果您还可以链接一些非常基本的和介绍性的指南来了解这项技术的基本概念，我将不胜感激。提前谢谢！

我想做的是：

pointFormat: '<span style="color:{series.color}">{series.name}: <b>{series.userOptions.ttip[point.x],.2f}</b><br/>'

代码{series.userOptions.ttip.0:,.2f}正确返回307.54（因此对其他数据集也是如此），{series.userOptions.ttip.1:,.2f}会返回-1595.18等等......但是值是对于图表的每个斧头显然都是一样的......

最小（非）工作示例

<!doctype html>
<html>
<head>
<title>Radar/Spider Chart</title>
<!-- jQuery - required by other -->
<script src="./scripts/jquery-2.0.3.js" charset="utf-8"></script>
<script src="./scripts/highcharts.src.js"></script>
<script src="./scripts/highcharts-more.src.js"></script>
<script src="./scripts/exporting.src.js"></script>
</head>

<body> 
<h1>Radar/Spider Chart</h1>
<h2>HighCharts</h2>
<p><div id="hcRadar" style="min-width: 480px; max-width: 640px; height: 480px; margin: 0 auto"></div>
<script type="text/javascript">
$(function () {
  $('#hcRadar').highcharts({

    chart: {
      polar: true,
      type: 'line'
    },

    title: {
    text: 'Pareto-optimal plans for given objectives',
      x: -80
    },

    pane: {
      size: '80%'
    },

    xAxis: {
      categories: ['rec(9)', 'rec(2)', 'cost', 'rec(10)', 'rec(5)'],
      tickmarkPlacement: 'on',
      lineWidth: 0
    },

    yAxis: {
      gridLineInterpolation: 'polygon',
      lineWidth: 0,
      min: 0
    },

    tooltip: {
      shared: true,
      pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>'
      // pointFormat: '<span style="color:{series.color}">{series.name}: <b>{series.userOptions.ttip.0:,.2f}</b><br/>'
    },

    legend: {
      align: 'right',
      verticalAlign: 'top',
      y: 70,
      layout: 'vertical'
    },

    series: [{
      name: 'max(rec(9))',
      data: [1.0, 0.034440171953752756, 0.9724749421689427, 0.9937086214393859, 0.021795139861960203],
      ttip: [307.54340875,-1595.182889375,5045200000.0,831.187495625,-1664.2022475],
      pointPlacement: 'on'
    }, {
      name: 'max(rec(2))',
      data: [0.0, 0.6023492392363033, 0.35422127975216294, 0.2467715189985823, 0.5963684134832621],
      ttip: [-118.742185,-656.951201875,1837700000.0,207.163683125,-686.6911225],
      pointPlacement: 'on'
    }]  
  });
});
</script></p>
</body>
</html>

Answer 1

不幸的是，不支持这样的东西 - 你需要使用tooltip.formatter并使用它来获取正确的值。但是，还有另一种解决方案，请参阅：http://jsfiddle.net/F2uMR/2/

而不是使用series.ttip使用point.ttip：

    series: [{
        name: 'max(rec(9))',
        data: [{
            y: 1.0,
            ttip: 307
        }, {
            y: 0.034440171953752756,
            ttip: -1589
        }, {
            y: 0.9724749421689427,
            ttip: 500000
        }, {
            y: 0.9937086214393859,
            ttip: 0.91
        }, {
            y: 0.021795139861960203,
            ttip: -1600
        }],
        ttip: [307.54340875, -1595.182889375, 5045200000.0, 831.187495625, -1664.2022475],
        pointPlacement: 'on'
    }]

并设置fot工具提示：pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.options.ttip:,.2f}</b><br/>'。

根据HighCharts对象的变量访问数组的元素

1 个答案: