0

我有一个图表，我需要像 Highchart Stocks 这样的时间导航器，所以我使用了带有一些手工选项的 Stock，它的渲染效果非常好。在股票中，您可以选择绘制变化而不是值。例如这个数据系列：

[1,2,3,4,5] 变化是 [+1,+1,+1,+1]。您可以使用 {point.change} 和 serie plotoption {compare:'value'} 在工具提示中访问此信息。

但是这样做会改变 YAxis 以适应这些变化。我只想在工具提示中显示变化，而不是更改我的图表。任何的想法？

这是具有正确 YAxis的正确图表，但您可以看到工具提示永远不会显示变化：http: //jsfiddle.net/techunter/PhW3t/

带有 {compare: 'percent'} 的这个显示工具提示中的正确变化，但YAxis 比例错误：http : //jsfiddle.net/techunter/PhW3t/49/

4

2 回答 2

0

显然很难让它工作，所以我已经像这样制作了我的工具提示格式化程序：

tooltip: {
                formatter:function(a,b,c){
                    var s = '<b>'+ Highcharts.dateFormat('%A, %b %e, %Y', this.x) +'</b>';
                    $.each(this.points, function(i, point) {
                        var prev = jQuery.inArray(point.x, point.series.processedXData)-1;
                        if(prev>=0){
                            prev = point.series.points[prev];
                            var percent = (point.y - prev.y) *100 / point.y;
                            var positive = false;
                            if(percent>0){
                                positive = true;
                                percent='+'+percent;
                            }
                            else
                                percent = percent +'';
                            percent = percent.substring(0,percent.indexOf('.')+3)+'%';
                            if(positive)
                                percent = '<span style="color:#000000">'+percent+'</span>';
                            else
                                percent = '<span style="color:#FF0000">'+percent+'</span>';
                            s += '<br/>'+'<span style="color:'+point.series.color+'">'+point.series.name+'</span>: <b>'+point.y+'</b> ('+percent+')';
                        }
                        else{
                            s += '<br/>'+'<span style="color:'+point.series.color+'">'+point.series.name+'</span>: <b>'+point.y+'</b>';
                        }
                    });

                    return s;
                },
                enable:true
            },

在行动：http: //jsfiddle.net/techunter/PhW3t/55/

如果有人有更好/更快的想法，请分享。

于 2012-06-21T13:51:41.557 回答
-1

查看您的代码，您将 yAxis 的最小值/最大值分别设置为 2/5 - 这与您的非变化图表相同。试试这些值（让你看到所有的点）：

yAxis: {
            min: -10,
            max:25,
            title: {
                text: '# of Hospitalizations'
            }
        }

如果需要，您也可以通过计算值设置最小值/最大值。

编辑： 我发现这个链接描述了进行预计算并将该数据作为注释字段放入系列对象中。如果您从 SQL 调用返回数据，这应该很容易。对 SQL 的简单修改以返回具有百分比变化的新列。然后，调用从调用到注释字段的百分比变化。

于 2012-06-21T12:29:29.833 回答