Question

我绘制了一个堆叠的列Highchart。图表工作正常，但有一些风格问题。 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

你想要传奇部分verticalAlign: bottom吗？

legend: {
    align: 'right',
    x: -70,
    verticalAlign: 'bottom',
    y: 20,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false
},

http://jsfiddle.net/38Mkf/

Answer 2

取出“浮动”和x / y位置使它看起来更清晰：

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

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

更改Highchart堆积柱形图的样式

2 个答案: