1

我正在使用 Highchart 库开发条形图。我创建了两个 y 轴，第一个是 TAM，第二个是 Share。Share 是百分比，而 TAM 不是。对于 Share y 轴值，我将最大值设为 100，它固定，但对于 TAM，该值是动态的。

参考图表

[http://jsfiddle.net/unidha/vGVRb/45/][1]

需要使 Share bar 的高度取决于 Tam bar 的高度。例如，目前 Tam 1 是 12,300,000 单位，share One 是 70%。根据图表，Share One 比 Tam One 高，因为它有自己的轴。现在我想如何让 Share One 的高度是 Tam 的 70%一个酒吧的高度？

有可能这样做吗？据我一直以来的理解，条形高度应由 y 轴确定，而不是基于其他条形高度。如果得到满足此类要求的解决方案，它应该是什么可能性？

这里与 jsfiddle 上面的代码相同，供您参考。

$(function () {
    $('#container').highcharts({
        chart: {
            type:'column',
            zoomType: 'xy',
            alignTicks:false
        },
          title: {
            text: 'Performance Snapshot'
        },

        xAxis: [{
            categories: ['Tam One   Share One ', ' Tam Two  Share Two  '],
            //NUR
            tickWidth:0
        }],

   yAxis: [{ // Primary yAxis
          labels: {
            //  format: '{value}%',
                style: {
                  //  color: '#89A54E'
                     color: 'FFFFFF'
                },
                //NUR
                step:2,
                y:0
            } ,
            min: 0,
             minRange:0.1,
             max:100,
            title: {
                text: 'Share',
                style: {
                 //   color: '#89A54E'
                    color: '#4572A7'
                }
            }
        }, { // Secondary yAxis
          title: {
                text: 'Tam',
                style: {
                    color: '#4572A7'
                }
            },

            labels: {
              //NUR  format: '{value} unit',
                style: {
                    color: '#4572A7'
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },

        series: [{
            name: 'Tam Unit',
            color: '#4572A7',
            type: 'column',
            yAxis: 1,
            data: [12300000, 34400000],
            tooltip: {
                valueSuffix: ' unit'
            },
             groupPadding: 0

        }, {
            name: 'Share',
            color: '#89A54E',
            type: 'column',
            data: [70,40],
            tooltip: {
                valueSuffix: '%'
            },
             groupPadding: 0
        }]

    });
});

谢谢

4

1 回答 1

0

您可以这样做，但您需要将系列数据作为计算值而不是百分比传递，例如：http: //jsfiddle.net/vGVRb/48/

tooltip: {
        shared: true,
        formatter: function () {
            var s = this.x,
                points = this.points,
                len = points.length;

            for (var i = 0; i < len; i++) {
                var p = points[i];
                console.log(p);

                s += '<br><span style="color:' + p.series.color + '">' + p.series.name + '</span><span>: ' + p.point.label + '</span>';

            }

            return s;
        }
    },

    series: [{
        name: 'Tam Unit',
        color: '#4572A7',
        type: 'column',
        data: [{
            y: 12300000,
            label: '12300000 units'
        }, {
            y: 34400000,
            label: '34400000 units'
        }],
        groupPadding: 0

    }, {
        name: 'Share',
        color: '#89A54E',
        type: 'column',
        data: [{
            y: 12300000 * 0.7,
            label: '70%'
        }, {
            y: 34400000 * 0.4,
            label: '40%'
        }],
        groupPadding: 0
    }]

您可以观察数据下的“标签”属性，稍后在 tooltip.formatter 中使用该属性以确保您将显示正确的工具提示。此外，值是根据标签中的百分比计算的。

于 2013-06-10T12:29:56.653 回答