javascript - 更改Highchart堆积柱形图的样式

Question

我绘制了一个堆积柱形 Highcharts 。该图表工作正常，但存在一些样式问题。 Y 轴名称显示在图表上方，因此未显示副标题我需要在下面显示 Y 轴名称。我该如何更改此设置？提前感谢您的帮助...

这是我的代码

 <script type="text/javascript">

    $(function () {
        $('#chart_div').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Material Vs Subcategory'
            },
            subtitle: {
                text: 'Source: www.test.com'
            },
            xAxis: {
                categories: ['Air Filtration','Clothing','Sporting Goods','Home Furnishings','Paint','Storage','Toys and Games']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Number of Products'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -70,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.x + '</b><br/>' +
                        this.series.name + ': ' + this.y + '<br/>' +
                        'Total: ' + this.point.stackTotal;
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: false,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                    }
                }
            },

            series: [{
             name: 'Unclassifiable',
             data: [0, 1, 0, 0, 1, 0, 0]
         },{
                  name: 'Aluminium',
                  data: [0, 0, 0, 0, 0, 0, 0]
             },{
                  name: 'Calcium',
                  data: [0, 0, 0, 1, 0, 0, 0]
              },{
                  name: 'Copper',
                  data: [0, 0, 0, 0, 0, 0, 0]
              },{
                  name: 'Gold',
                  data: [0, 1, 0, 0, 1, 1, 0]
              },{
                  name: 'Iron',
                  data: [0, 0, 0, 0, 0, 0, 0]
              },{
                  name: 'Platinum',
                  data: [0, 0, 0, 0, 1, 0, 1]
              },{
                  name: 'Silver',
                  data: [0, 3, 3, 0, 0, 0, 0]
              },{
                  name: 'Steel',
                  data: [1, 0, 0, 1, 0, 0, 0]
              },{
                  name: 'Unknown',
                  data: [0, 1, 0, 0, 1, 0, 0]
              }]

        });
    });

</script>

Answer 1

去掉“ float ”和 x/y 位置也使它看起来更干净:

    legend: {
        verticalAlign: 'bottom',
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
    },

http://jsfiddle.net/38Mkf/1/