javascript - highchars.js 中包含两个图例项目的两列

Question

我需要在 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);

但我需要的正是您在这张图片上看到的:

Answer 1

查看此fiddle 。这就是你所追求的吗？

实现方式:

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

并将零添加到堆栈中:

  "series":[
   {
      "color":"#372A4B",
       data: [85, 0],
       name: "Average"
    },
    {
       "color":"#1EC37A",
       data: [0, 63.11],
       name: "Your Value"
    }]