0

我在 highcharts.js 中需要这个：

  • 两列
  • 图例中的两个项目 - 每个用于具有自己颜色的列
  • 每列的标签底部

正如您在底部放置的图像上看到的那样

我有这个 - jsfiddle - 但传说只有一个项目..

var options = {
   "chart":{
       'renderTo': 'container',
      "type":"column"
   },
   "title":{
      "text":"",
      "style":{
         "display":"none"
      }
   },
   "xAxis":{
      "categories":[
         "Average",
         "Your value"
      ],
      "title":{
         "text":"x label",
         "style":{
            "font":"bold 16px Verdana",
            "color":"#000"
         }
      }
   },
   "yAxis":{
      "min":0,
      "title":{
         "text":"y label",
         "style":{
            "font":"bold 16px Verdana",
            "color":"#000"
         }
      }
   },
   "legend":{
      "align":"center",
      "itemDistance":20,
      "verticalAlign":"top",
      "margin":25,
      "floating":false,
      "borderColor":"#CCC",
      "borderWidth":1,
      "shadow":false,
      "borderRadius":0
   },
   "series":[
      {
         "color":"#0066FF",
         "data":[
            {
               "y":50,
               "color":"#372A4B"
            },
            {
               "y":30,
               "color":"#1EC37A"
            }
         ]
      }
   ]
};

var chart = new Highcharts.Chart(options);

或者这个 - jsfiddle - 但每列没有底部标签

var options = {
   "chart":{
       'renderTo': 'container',
      "type":"column"
   },
   "title":{
      "text":"",
      "style":{
         "display":"none"
      }
   },
   "xAxis":{
        "categories":[
         ["Average"],
         ["Your value"]
      ],
      "title":{
         "text":"x label",
         "style":{
            "font":"bold 16px Verdana",
            "color":"#000"
         }
      }
   },
   "yAxis":{
      "min":0,
      "title":{
         "text":"y label",
         "style":{
            "font":"bold 16px Verdana",
            "color":"#000"
         }
      }
   },
   "legend":{
      "align":"center",
      "itemDistance":20,
      "verticalAlign":"top",
      "margin":25,
      "floating":false,
      "borderColor":"#CCC",
      "borderWidth":1,
      "shadow":false,
      "borderRadius":0
   },
      labels: {
            items: [{
                html: "Legend 1",
                style: {
                    top: '10px',
                    left: '20px',
                    height: '30px'
                }
            }, {
                html: "Legend 2",
                style: {
                    top: '10px',
                    left: '120px',
                    height: '30px'
                }
            }]
        },
   "series":[
      {
         "color":"#372A4B",
         "name": "Average",
         "data":[
            {
               "y":50
            }
         ]
      },
      {
         "color":"#1EC37A",
         "name": "Your value",
         "data":[
            {
               "y":30,
            }
         ]
      }
   ]
};

var chart = new Highcharts.Chart(options);

但我需要的正是你在这张图片上看到的：

4

2 回答 2

2

看到这个小提琴。这就是你所追求的吗？

通过以下方式实现：

plotOptions: {
    column: {
        stacking: 'normal'
    }
},

并将零添加到堆栈中：

  "series":[
   {
      "color":"#372A4B",
       data: [85, 0],
       name: "Average"
    },
    {
       "color":"#1EC37A",
       data: [0, 63.11],
       name: "Your Value"
    }]
于 2013-09-30T16:08:43.857 回答
1

我可以使用 stackLabels 接近，但标签在绘图区域中，而不是在轴之外。

    stackLabels: {
        verticalAlign: 'bottom',
        enabled: true,
        style: {
            fontWeight: 'bold',
            color: 'gray'
        },
        formatter: function () {
            return this.stack;
        }
    },

http://jsfiddle.net/bhlaird/rZKwq/1/

于 2013-09-30T15:26:20.713 回答