Highcharts：如何将类别推到一边？ [英] Highcharts: How to push the categories to the side?

问题描述

我试图制作一张看起来像这样的图：

目前我有这个： http://jsfiddle.net/s1uy3rkt/3/

  $（'＃graph_agerange '）.highcharts（{
图：{
 type：'bar'，
 height：140 
}，
 
 xAxis：{
 lineColor：'#ffffff'，
 tickColor：'#ffffff'，
标签：{
 align：'right'，
x：-50，
 style： {
 color：'＃444'，
 fontSize：'14px'，
 fontWeight：'400'，
 fontFamily：'Source Sans Pro'
} 
 $，
 
类别：['Grand Budapest Hotel'，'Boyhood'] 
}，
 yAxis：{
 gridLineColor：'#ffffff'， 
 lineColor：'#ffffff'，
 tickColor：'#f fffff'，
标签：{
启用：false，
}，
标题：{
 text：null 
} 
}，
系列：[{
 name：Percent，
 borderColor：'＃ccd6da'，
 data：[36,74] 
}]，
 title：{
 text：null 
}，
 loading：false 
}）; 
  

我将如何：
1）获取白色条部分，矩形总是固定在右边的百分比？
2）我怎样才能得到答案出现在栏内？

解决方案

简单的图表非常具体的样式，你可能会更好使用HTML / CSS和自己的JavaScript动画。

我可以考虑将所有样式合并到高图表中的唯一方法是使用highcharts SVG渲染器手动在条形图后面绘制白色矩形。

我已经做了很多改变来实现这一点，在这里描述太多了，所以请查看更新JSFiddle

最重要的是，请注意容器需要有固定的宽度，我假设只有两个酒吧（如图所示）。对于更多的酒吧，你将不得不更新数学。
如果需要，使用 barWidth 变量控制条的大小。

I am trying to make a graph that looks like this:

Currently I have this: http://jsfiddle.net/s1uy3rkt/3/

$('#graph_agerange').highcharts({
    chart: {
      type: 'bar',
      height: 140
    },

  xAxis: {
    lineColor: '#ffffff',
    tickColor: '#ffffff',
    labels: {
      align: 'right',
      x: -50,
      style: {
        color: '#444',
        fontSize: '14px',
        fontWeight: '400',
        fontFamily: 'Source Sans Pro'
      }
    },

    categories: ['The Grand Budapest Hotel','Boyhood']
  },
  yAxis: {
    gridLineColor: '#ffffff',
    lineColor: '#ffffff',
    tickColor: '#ffffff',
    labels: {
      enabled: false,
    },
    title: {
      text: null
    }
  },
  series: [{
    name: "Percent",
    borderColor: '#ccd6da',
    data: [36,74]
  }],
  title: {
    text: null
  },
  loading: false
});

How would I: 1) Get the white bar part so that the length of that rectangle is always fixed with the percentage on the right? 2) How do I get the answer to show up inside of the bar?

解决方案

In the case of a simple chart with very specific styling you might be better off using html/css and your own javascript animation.

The only way I can think of to incorporate all your styling in a highcharts chart is to draw the white rectangles behind the bars manually using the highcharts SVG renderer.

I've made lots of changes to accomplish this, too many to describe here so please just check out the updated JSFiddle

Most importantly, note that the container needs to have a fixed width and I'm assuming only two bars (as in your illustration). For more bars you will have to update the math. Use the barWidth variable to control the size of the bars if needed.

这篇关于Highcharts：如何将类别推到一边？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！