2015-02-23 25 views
5

我使用高图创建柱状图 - 我无法显示图表中所有系列的所有数据标签。我在一个柱形图中有两个系列,而第一个系列显示所有数据标签,第二个系列在显示其他数据标签时不显示少量数据标签。Highchart(柱状图):几个数据标签不出现在一个系列中

即时帮助将高度赞赏。

请参考Fiddle Sample接手。

"chart": { 
     "type": "column", 
     "plotShadow": false, 
     "polar": false, 
     "renderTo": "" 
    }, 
    "credits": { 
     "enabled": false 
    }, 
    "title": { 
     "text": "" 
    }, 
    "xAxis": { 
     "categories": ["Category 1", "Category 2", "Category 3", "Category 4", "Category 5", "Category 6", "Category 7", "Category 8", "Category 9"], 
     "labels": { 
      "enabled": true, 
      "style": { 
       "fontSize": "8px", 
       "fontFamily": "Arial" 
      } 
     }, 
     "lineWidth": 1, 
     "tickWidth": 0, 
     "title": { 
      "text": "", 
      "style": { 
       "fontFamily": "Arial" 
      } 
     } 
    }, 
    "yAxis": { 
     "lineWidth": 1, 
     "title": { 
      "text": "", 
      "style": { 
       "fontFamily": "Arial" 
      } 
     }, 
     "gridLineWidth": 0, 
     "labels": { 
      "enabled": true, 
      "format": "{value:.0f}", 
      "style": { 
       "fontSize": "8px", 
       "fontFamily": "Arial" 
      } 
     }, 
     "startOnTick": true, 
     "endOnTick": true 
    }, 
    "series": [{ 
     "name": "Company Value", 
     "data": [{ 
      "name": "Adidas Group", 
      "color": "#f1b11d", 
      "y": 63.0, 
      "showInLegend": false, 
      "dataLabels": { 
       "align": "center", 
       "enabled": true, 
       "borderColor": "", 
       "rotation": 0, 
       "style": { 
        "fontSize": "8px", 
        "fontFamily": "Arial" 
       } 
      }, 
      "borderColor": "#ffffff", 
      "enableMouseTracking": false, 
      "sliced": false, 
      "selected": false 
     }, { 
      "name": "Adidas Group", 
      "color": "#f1b11d", 
      "y": 24.0, 
      "showInLegend": false, 
      "dataLabels": { 
       "align": "center", 
       "enabled": true, 
       "borderColor": "", 
       "rotation": 0, 
       "style": { 
        "fontSize": "8px", 
        "fontFamily": "Arial" 
       } 
      }, 
      "borderColor": "#ffffff", 
      "enableMouseTracking": false, 
      "sliced": false, 
      "selected": false 
     }, { 
      "name": "Adidas Group", 
      "color": "#f1b11d", 
      "y": 177.0, 
      "showInLegend": false, 
      "dataLabels": { 
       "align": "center", 
       "enabled": true, 
       "borderColor": "", 
       "rotation": 0, 
       "style": { 
        "fontSize": "8px", 
        "fontFamily": "Arial" 
       } 
      }, 
      "borderColor": "#ffffff", 
      "enableMouseTracking": false, 
      "sliced": false, 
      "selected": false 
     }, { 
      "name": "Adidas Group", 
      "color": "#f1b11d", 
      "y": 197.0, 
      "showInLegend": false, 
      "dataLabels": { 
       "align": "center", 
       "enabled": true, 
       "borderColor": "", 
       "rotation": 0, 
       "style": { 
        "fontSize": "8px", 
        "fontFamily": "Arial" 
       } 
      }, 
      "borderColor": "#ffffff", 
      "enableMouseTracking": false, 
      "sliced": false, 
      "selected": false 
     }, { 
      "name": "Adidas Group", 
      "color": "#f1b11d", 
      "y": 224.0, 
      "showInLegend": false, 
      "dataLabels": { 
       "align": "center", 
       "enabled": true, 
       "borderColor": "", 
       "rotation": 0, 
       "style": { 
        "fontSize": "8px", 
        "fontFamily": "Arial" 
       } 
      }, 
      "borderColor": "#ffffff", 
      "enableMouseTracking": false, 
      "sliced": false, 
      "selected": false 
     }, { 
      "name": "Adidas Group", 
      "color": "#f1b11d", 
      "y": 297.0, 
      "showInLegend": false, 
      "dataLabels": { 
       "align": "center", 
       "enabled": true, 
       "borderColor": "", 
       "rotation": 0, 
       "style": { 
        "fontSize": "8px", 
        "fontFamily": "Arial" 
       } 
      }, 
      "borderColor": "#ffffff", 
      "enableMouseTracking": false, 
      "sliced": false, 
      "selected": false 
     }, { 
      "name": "Adidas Group", 
      "color": "#f1b11d", 
      "y": 349.0, 
      "showInLegend": false, 
      "dataLabels": { 
       "align": "center", 
       "enabled": true, 
       "borderColor": "", 
       "rotation": 0, 
       "style": { 
        "fontSize": "8px", 
        "fontFamily": "Arial" 
       } 
      }, 
      "borderColor": "#ffffff", 
      "enableMouseTracking": false, 
      "sliced": false, 
      "selected": false 
     }, { 
      "name": "Adidas Group", 
      "color": "#f1b11d", 
      "y": 903.0, 
      "showInLegend": false, 
      "dataLabels": { 
       "align": "center", 
       "enabled": true, 
       "borderColor": "", 
       "rotation": 0, 
       "style": { 
        "fontSize": "8px", 
        "fontFamily": "Arial" 
       } 
      }, 
      "borderColor": "#ffffff", 
      "enableMouseTracking": false, 
      "sliced": false, 
      "selected": false 
     }, { 
      "name": "Adidas Group", 
      "color": "#f1b11d", 
      "y": 20.0, 
      "showInLegend": false, 
      "dataLabels": { 
       "align": "center", 
       "enabled": true, 
       "borderColor": "", 
       "rotation": 0, 
       "style": { 
        "fontSize": "8px", 
        "fontFamily": "Arial" 
       } 
      }, 
      "borderColor": "#ffffff", 
      "enableMouseTracking": false, 
      "sliced": false, 
      "selected": false 
     }], 
     "regression": false, 
     "enableMouseTracking": true, 
     "color": "#f1b11d", 
     "showInLegend": false 
    }, { 
     "name": "All Companies Average Score", 
     "data": [{ 
      "name": "All Companies", 
      "color": "#00aeef", 
      "y": 25.0, 
      "showInLegend": false, 
      "dataLabels": { 
       "align": "center", 
       "enabled": true, 
       "borderColor": "", 
       "rotation": 0, 
       "style": { 
        "fontSize": "8px", 
        "fontFamily": "Arial" 
       } 
      }, 
      "borderColor": "#ffffff", 
      "enableMouseTracking": false, 
      "sliced": false, 
      "selected": false 
     }, { 
      "name": "All Companies", 
      "color": "#00aeef", 
      "y": 18.0, 
      "showInLegend": false, 
      "dataLabels": { 
       "align": "center", 
       "enabled": true, 
       "borderColor": "", 
       "rotation": 0, 
       "style": { 
        "fontSize": "8px", 
        "fontFamily": "Arial" 
       } 
      }, 
      "borderColor": "#ffffff", 
      "enableMouseTracking": false, 
      "sliced": false, 
      "selected": false 
     }, { 
      "name": "All Companies", 
      "color": "#00aeef", 
      "y": 90.0, 
      "showInLegend": false, 
      "dataLabels": { 
       "align": "center", 
       "enabled": true, 
       "borderColor": "", 
       "rotation": 0, 
       "style": { 
        "fontSize": "8px", 
        "fontFamily": "Arial" 
       } 
      }, 
      "borderColor": "#ffffff", 
      "enableMouseTracking": false, 
      "sliced": false, 
      "selected": false 
     }, { 
      "name": "All Companies", 
      "color": "#00aeef", 
      "y": 1821.0, 
      "showInLegend": false, 
      "dataLabels": { 
       "align": "center", 
       "enabled": true, 
       "borderColor": "", 
       "rotation": 0, 
       "style": { 
        "fontSize": "8px", 
        "fontFamily": "Arial" 
       } 
      }, 
      "borderColor": "#ffffff", 
      "enableMouseTracking": false, 
      "sliced": false, 
      "selected": false 
     }, { 
      "name": "All Companies", 
      "color": "#00aeef", 
      "y": 84.0, 
      "showInLegend": false, 
      "dataLabels": { 
       "align": "center", 
       "enabled": true, 
       "borderColor": "", 
       "rotation": 0, 
       "style": { 
        "fontSize": "8px", 
        "fontFamily": "Arial" 
       } 
      }, 
      "borderColor": "#ffffff", 
      "enableMouseTracking": false, 
      "sliced": false, 
      "selected": false 
     }, { 
      "name": "All Companies", 
      "color": "#00aeef", 
      "y": 83.0, 
      "showInLegend": false, 
      "dataLabels": { 
       "align": "center", 
       "enabled": true, 
       "borderColor": "", 
       "rotation": 0, 
       "style": { 
        "fontSize": "8px", 
        "fontFamily": "Arial" 
       } 
      }, 
      "borderColor": "#ffffff", 
      "enableMouseTracking": false, 
      "sliced": false, 
      "selected": false 
     }, { 
      "name": "All Companies", 
      "color": "#00aeef", 
      "y": 97.0, 
      "showInLegend": false, 
      "dataLabels": { 
       "align": "center", 
       "enabled": true, 
       "borderColor": "", 
       "rotation": 0, 
       "style": { 
        "fontSize": "8px", 
        "fontFamily": "Arial" 
       } 
      }, 
      "borderColor": "#ffffff", 
      "enableMouseTracking": false, 
      "sliced": false, 
      "selected": false 
     }, { 
      "name": "All Companies", 
      "color": "#00aeef", 
      "y": 241.0, 
      "showInLegend": false, 
      "dataLabels": { 
       "align": "center", 
       "enabled": true, 
       "borderColor": "", 
       "rotation": 0, 
       "style": { 
        "fontSize": "8px", 
        "fontFamily": "Arial" 
       } 
      }, 
      "borderColor": "#ffffff", 
      "enableMouseTracking": false, 
      "sliced": false, 
      "selected": false 
     }, { 
      "name": "All Companies", 
      "color": "#00aeef", 
      "y": 12.0, 
      "showInLegend": false, 
      "dataLabels": { 
       "align": "center", 
       "enabled": true, 
       "borderColor": "", 
       "rotation": 0, 
       "style": { 
        "fontSize": "8px", 
        "fontFamily": "Arial" 
       } 
      }, 
      "borderColor": "#ffffff", 
      "enableMouseTracking": false, 
      "sliced": false, 
      "selected": false 
     }], 
     "regression": false, 
     "enableMouseTracking": true, 
     "color": "#00aeef", 
     "showInLegend": false 
    }], 
    "plotOptions": { 
     "series": { 
      "enableMouseTracking": false, 
      "dataLabels": { 
       "color": "#000000", 
       "enabled": true, 
       "borderColor": "", 
       "format": "{y:.0f}" 
      } 
     }, 
     "column": { 
      "pointWidth": 20 
     } 
    }, 
    "exporting": { 
     "enabled": false 
    }, 
    "tooltip": { 
     "enabled": true, 
     "pointFormat": "{series.name}: {point.y:.0f}", 
     "shared": false, 
     "headerFormat": "" 
    }, 
    "legend": { 
     "enabled": false, 
     "x": 0, 
     "floating": false, 
     "shadow": false, 
     "reversed": false, 
     "y": 0 
    } 
+2

集[allowOverlap](http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.allowOverlap)为真:HTTP://的jsfiddle .net/cthzmsg0/1/ – 2015-02-24 11:58:16

+0

@PawełFus:谢谢你的工作 – Bhupendra 2015-02-25 09:39:05

+0

@PawelFus:非常感谢这个信息。这对我有很大的帮助。请添加,作为你的答案。 – 2015-05-12 15:40:00

回答

8
+2

非常感谢!这一直困扰着我几个月:) – davaus 2016-08-08 03:47:56

+0

如何添加X轴系列名称'功能BarSeriesData(val,name){barChart.series [0] .name = name; barChart.series [0] .setData(val);} '在这个代码中,名字的值并不反映在图中,而是setData正在工作。 – Vijayaraghavan 2017-08-31 13:55:39

+0

使用[series.update()](http://api.highcharts.com/highcharts/Series.update)。 – 2017-08-31 14:50:57

相关问题