Highcharts - 每个数据带有图例的柱形图

时间:2015-12-07 08:03:13

标签: highcharts

我希望列中的每个数据都有图表来创建自己的图例,以便在用户需要时显示/隐藏,因此我使用了解决方案here

它工作正常但是有点问题。列被压缩到图表的中间部分(我希望在图表中均匀地绘制列)enter image description here

继承代码

    var options = {
        exporting: {
            enabled: false
        },
        legend: {
            enabled: true
        },
        chart: {
            renderTo: 'sampleChart',
            type: 'column',
        },
        title: {
            text: 'NCR'
        },
        subtitle: {
            text: '',
            useHTML: true
        },
        xAxis: {
            categories: [],
            title: {
                text: null
            },
            labels: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                align: 'low',
                text:null
            },
            labels: {
                enabled: true,
                overflow: 'justify'
            },
            min: 0
        },
        plotOptions: {
            series: {
                marker: {
                    lineWidth: 0
                }
            },
            column: {
                color: '#03A9F4',
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.2f}'
                }
            }
        },
        tooltip:{
            enabled:true,
            shared: false
        },
        credits: {
            enabled: false
        },
        series: [
            { name: 'Week1 ', data: [55.22] },
            { name: 'Week2 ', data: [76.06] },
            { name: 'Week3 ', data: [88] },
            { name: 'Week4 ', data: [23.6] },
            { name: 'Week5 ', data: [23.99] },
            { name: 'Week6 ', data: [42.98] },
            { name: 'Week7 ', data: [91.32] },
            { name: 'Week8 ', data: [64.21] },
            { name: 'Week9 ', data: [43.32] },
            { name: 'Week10 ', data: [79.89] }
        ]
    }; //close options


    var chart = new Highcharts.Chart(options);

1 个答案:

答案 0 :(得分:1)

选项groupPadding(plotOptions> column> groupPadding)负责此边距。默认值为0.2,将其设置为较低以减小边距。

Doku:http://api.highcharts.com/highcharts#plotOptions.column.groupPadding