CODEWITHSUNDEEP
javascripthighcharts
shuta
shuta

Reputation: 23

highchart 3d column - show "beta axis title" and "beta axis label"

English is not my native language.If you don't understand my question,please tell me.

I want to show the "beta axis title" and "beta axis label" in highchart. What I want is as follows:

I want

However, what I got is here:

I got

I googled.I didn't find any solution to my problem.

my javascript code is as follows.

$(function () {
$('#container').highcharts({
    chart: {
        type: 'column',
        margin: 75,
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 50,
            depth: 110
        }
    },
    title: {
        text: null
    },
    xAxis:{
    title: {
          text: "构建日期"
      },
        categories: ["2010-10-17","2010-10-18","2010-10-19","2010-10-20","2010-10-21","2010-10-22"],

    },
    yAxis: {
      title: {
          text: "内存(MB)"
      }
         },
    plotOptions: {
        column: {
            depth: 40,
            stacking: true,
            grouping: false,
            groupZPadding: 10
        }
    },
    series: [{
            name: 'HUAWEI',
        data: [1, 2, 4, 3, 2, 4],
        stack: 0
    }, {
            name: 'XIAOMI',
        data: [5, 6, 3, 4, 1, 2],
        stack: 1
    }, {
            name: 'oppo',
        data: [7, 9, 8, 7, 5, 8],
        stack: 2
    }]
  });
});

Upvotes: 0

Views: 486

Answers (1)

ewolden
ewolden

Reputation: 5803

You need to set the zAxis categories to have the labels, and the zAxis title to have the title. It is important to note that to show the labels, you need to define a min and max. This is a minimal example that will show it all (on top of eachother):

zAxis: {
  title: {
    text: 'TITLE HERE',
    },
  min: 0,
  max: 2,
  categories: ["HUAWEI", "XIAOMI", "oppo"] 
}

Ex1

Working example: http://jsfiddle.net/ewolden/0uc1g8b5/3/

There is a lot of options for tweaking the look of this, you should have a look at the API on zAxis labels/titles.

API on zAxis.titles: https://api.highcharts.com/highcharts/zAxis.title

For example you can rotate and have it look like this:

ex2

Working example: http://jsfiddle.net/ewolden/0uc1g8b5/5/

Or you can use skew3d and have it look like this:

ex3

Working example: http://jsfiddle.net/ewolden/0uc1g8b5/6/

It depends a lot on what you want to write as the title and labels. You will just have to experiment.

Upvotes: 1

Related Questions