Highcharts - Stacked bar - 可能有与数据间隔相对应的标签间隔?

Posted

技术标签:

【中文标题】Highcharts - Stacked bar - 可能有与数据间隔相对应的标签间隔?【英文标题】:Highcharts - Stacked bar - Possible to have label interval corresponding to data interval? 【发布时间】:2013-02-19 16:08:28 【问题描述】:

我使用 Highcharts 生成了一个堆积条形图,但标签之间的间隔存在问题。

我的数据间隔只有6,highchart生成的标签间隔是100,见demo:http://jsfiddle.net/NjaEw/2/

我想要一个数据对应的标签区间。

这里是代码:

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<h1>Testing</h1>
<div id="conformity-by-page" style="width: 100%; height:250px; margin: 0 auto"></div>

        $(document).ready(function() 
            chart = new Highcharts.Chart(
                chart: 
                    renderTo: 'conformity-by-page',
                    type: 'bar',
                    borderWidth: 1,
                    borderColor: '#000',
                    borderRadius: 0,
                    marginTop: 50
                ,
                exporting: 
                    enabled: false
                ,
                title: 
                    text: ''
                ,
                xAxis: 
                    lineWidth:5,      
                    categories: ['Web site'],
                    //tickWidth: 0,
                    title: 
                        text: null
                    ,
                    labels: 
                        style: 
                            color: '#000000',
                            fontWeight: 'bold',
                            fontSize: '14px'
                        
                    
                ,
                yAxis: 
                    lineWidth:0,
                    title: 
                        text: 'Number of page',
                        align: 'high',
                        style: 
                            color: '#000000',
                            fontSize: '16px'
                        
                    ,
                    labels: 
                        overflow: 'justify',
                        style: 
                            color: '#000000',
                            fontWeight: 'bold',
                            fontSize: '14px'
                        
                    

                ,
                tooltip: 
                    formatter: function() 
                        return ''+
                            this.series.name +': '+ this.y +' règles';
                    ,
                    backgroundColor: '#FFFFFF',
                    style: 
                        color: '#000',
                        fontSize: '14px',
                        padding: '5px'
                    
                ,
                plotOptions: 
                    bar: 
                        borderColor: '#000000',
                        borderWidth: 1,
                        /*minPointLength: 10,*/
                        pointWidth: 25,
                        stacking: 'percent',
                        dataLabels: 
                            enabled: true
                        
                    
                ,
                legend: 
                    verticalAlign: 'top',
                    backgroundColor: '#FFFFFF',
                    reversed: true,
                    shadow: true,
                    symbolWidth: 50,
                    itemStyle: 
                        color: '#000000',
                        fontSize: '15px'
                    
                ,
                credits: 
                    enabled: false
                ,      series: [
                    name: 'Warning',data: [null], color: '#FFFF40',
                    dataLabels: 
                        style: 
                            fontSize: '15px',
                            color: '#000000'
                        
                    
                , 
                    name: 'Error',data: [3], color: '#FF8080',
                    dataLabels: 
                        style: 
                            fontSize: '15px',
                            color: '#000000'
                        
                    
                , 
                    name: 'N/A',data: [1], color: '#B5EBFB',
                    dataLabels: 
                        style: 
                            fontSize: '15px',
                            color: '#000000'
                        
                    
                , 
                    name: 'OK',data: [2], color: '#80FF80',
                    dataLabels: 
                        style: 
                            fontSize: '15px',
                            color: '#000000'
                        
                    
                ]
            );
       );

【问题讨论】:

【参考方案1】:

问题是您使用的是stacking: 'percent'。 将其更改为'normal'

Demo

【讨论】:

哦!非常感谢!

以上是关于Highcharts - Stacked bar - 可能有与数据间隔相对应的标签间隔?的主要内容,如果未能解决你的问题,请参考以下文章

R语言ggplot2可视化堆叠条形图(stacked bar plot)并且在每个条形图的顶端使用数值标签表示整个条形的加和值(sum value above the stacked bar)

matplotlib绘制带比例(percentile)的堆叠(stacked)条形图(bar plot)

cufflinks基于dataframe数据绘制柱状图(bar plot)堆叠柱状图(stacked bar plot)

D3.js中Stacked-to-Grouped Bars详解

D3.js中Stacked-to-Grouped Bars详解

r 定制堆叠的#rt http://stackoverflow.com/questions/2578961/how-to-better-create-stacked-bar-graphs-with-m