Question

我正在使用Highchart库开发条形图。我创建了两个y轴，第一个用于TAM，第二个用于Share.Share是百分比而TAM不是。对于Share y轴值，我做的最大值是100并且它已修复，但对于TAM，该值是动态的。

参考图表

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

需要使共享栏高度取决于Tam条高度。例如，目前Tam一个是12,300,000单位，份额一个是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
        }]

    });
});

由于

Answer 1

您可以执行此操作，但您需要将系列数据作为计算值传递，而不是百分比，例如：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
    }]

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

条形值取决于HighChart中的其他条形值

1 个答案: