Question

我在highcharts.js中需要这个：

两列
legeneds中的两个项目 - 每个项目都有自己的颜色
标记每列的底部

正如您在底部放置的图片中看到的那样

我有这个 - 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'
    }
},

将0添加到堆栈中：

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

Answer 2

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

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

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

在highcharts.js中有两个带有两个图例项的列

2 个答案: