0

我正在尝试使用 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>
4

1 回答 1

0

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

而不是使用series.ttipuse 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 tooltip: pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.options.ttip:,.2f}</b><br/>'.

于 2013-09-12T15:29:20.380 回答