Question

我想要得到的是

但我的输出是

我的代码在下面，

function aoassortmentschart() {
$(function () {
    $('#ao-assortments-container').highcharts({
        chart: {
            type: 'column',
            inverted : true
        },
        credits: { enabled: false },
        title: null,
        subtitle : null,
        xAxis: {
            categories: ["Cluster 5", "Cluster 4", "Cluster 3", "Cluster 2", "Cluster 1"],
            labels: {
                enabled: true,
                useHTML: true,
                formatter : function() {
                    return '<div style="margin-left: 120px,width: 100px;"><input type="radio"  style="margin-right: 100px"/>' + this.categories + '</div>';
                }
            },
            tickWidth: 0
        },
        yAxis: {
            min: 0,
            max: 250,

            title: {
                useHTML : true,
                formatter: function(){
                    return '<div class="ao-assortment-title"><span class="shape" style="width: 40px;height:40px;bacground:green">&nbsp;</span>Sales</div>'
                }
            }

        },
        legend : {
            enabled: false,

        },
        plotOptions: {
            series: {
                allowPointSelect: false,
                paddingLeft: "50px",
                pointInterval : 50,

                dataLabels: {
                    align: 'top',
                    verticalAlign : "middle",
                    enabled: true,
                    useHTML: true,
                    formatter: function () {
                        return "$ " + this.y
                },
                style: {
                    fontWeight: "normal",
                    textAlign: "center",
                    color: "#000"
                }

            }
            },
            styles : {
                minHeight : "200px"
            },

        },
        series: [
        {
            name : "5 clusters",
            data: [198],
            color: "#60B3D1"
        },
        {
            name: "4 clusters",
            data: [71.5],
            color: "#60B3D1"
        },
        {
            name: "3 clusters",
            data: [21.5],
            color: "#60B3D1"
        },
        {
            name: "2 clusters",
            data: [31.5],
            color: "#60B3D1"
        },
        {
            name: "1 clusters",
            data: [51.5],
            color: "#60B3D1"
        }
        ]
    });
    // the button action

}); }

所以，

如何实现群集值列
和绘图条与y轴的间距？

帮助将不胜感激!!提前谢谢

Answer 1

这是一个简单的解决方法。不要在xAxis标签格式化程序中使用this.categories，而是使用this.value。

每当您使用“格式化程序”功能时，您的调用都是自我引用的（在这种情况下，“this”=您要格式化的类别）。

我希望这有帮助！

Answer 2

可以为每个点设置x值，并为系列禁用grouping以获得与您的要求类似的图表。在xAxis格式化程序中使用this.value。

示例＃1：http://jsfiddle.net/Lzrje8fn/

知道可以为点设置x，您可以在一个系列中设置所有点，并为点设置keys。

示例＃2：http://jsfiddle.net/Lzrje8fn/2/

如何在highcharts中获取标签中的类别值和间距

2 个答案: