Highcharts: How to push the categories to the side

问题:

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?

回答1:

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.

回答2:

You can disable labels on xAxis and then use datalables formatter to print label inside bar.

plotOptions: {
        series: {
            dataLabels: {
                inside:true,
                align:'left',
                enabled: true,
                formatter: function () {
                    return this.key;
                }
            }
        }
    },

Example: http://jsfiddle.net/s1uy3rkt/8/