Highcharts试图直接在列左侧显示标签

Question

我有这个highcharts图表，我正在尝试添加“Total”或“Percent”等标签，这些标签将直接显示在图表周围所有数字的左侧。我想知道在highcharts中是否有一种优雅的方法可以避免使用html。它会像一个看不见的额外列或其他东西。谢谢！

new Highcharts.Chart({
      "chart":{
        "renderTo":setup.renderTo, // dynamic
        "type":"column",
        "width": 400,
        "height": 150 - setup.offset, 
        "backgroundColor":"rgba(255,255,255,0)",
        borderWidth:0,
        borderColor:'#fff'

      },
      "title":{
        "text":""
      },
      "legend":{
        "enabled":false
      },
      "credits":{
        "enabled":false
      },
      xAxis:[{
        categories:setup.x_mixed,
        maxZoom:5,
        minPadding: 0.2,
        labels:{
          "enabled":setup.categories_label,
          "y":16,
          "style":{
            "fontSize":13,
            "color":"#999",
            fontFamily:"'helvetica neue',helvetica",
            whiteSpace:"nowrap",
            textOverflow:"clip",
            width:"100%",
            marginTop:legendSpacing
          },
          formatter:function () {
            return this.value.split("|")[0]
          }
        },
        lineColor:"rgba(255,255,255,0)",
        tickWidth:0,
        offset:0
      },{
        categories:setup.x_mixed,
        maxZoom:5,
        minPadding: 0.2,
        linkedTo: 0,
        labels:{
          "enabled":true,
          "y":16,
          "style":{
            "fontSize":10,
            "color":"#999",
            fontFamily:"'helvetica neue',helvetica",
            whiteSpace:"nowrap",
            textOverflow:"clip",
            width:"100%",
            marginTop:legendSpacing
          },
          formatter:function () {
            return this.value.split("|")[1]
          }
        },
        lineColor:"rgba(255,255,255,0)",
        tickWidth:0,
        opposite: setup.categories_label,
        offset: -13 - setup.offset
      },{
        categories:setup.x_mixed,
        maxZoom:5,
        minPadding: 0.2,
        linkedTo: 0,
        labels:{
          "enabled":true,
          "y":16,
          "style":{
            "fontSize":10,
            "color":"#999",
            fontFamily:"'helvetica neue',helvetica",
            whiteSpace:"nowrap",
            textOverflow:"clip",
            width:"100%",
            marginTop:legendSpacing
          },
          formatter:function () {
            return this.value.split("|")[2]
          }
        },
        lineColor:"rgba(255,255,255,0)",
        tickWidth:0,
        opposite: setup.categories_label,
        offset: - setup.offset
      }],
      "yAxis":{
        "title":{
          "text":false
        },
        "gridLineWidth":0,
        "labels":{
          "enabled":false
        },
        "lineColor":"rgba(255,255,255,0)",
        "max":setup.max_p,
        "min":2,
        reversed:setup.reversed
      },
      "plotOptions":{
        "column":{
          "color":setup.option_color,
          "shadow":false,
          "borderColor":"#fff",
          "borderWidth":0,
          groupPadding:0.07,
          pointPadding:0.01
        }
      },
      tooltip:{
        shared: true,
        backgroundColor:'rgba(0,0,0,0.8)',
        style:{
          color:'#ffffff'
        },
        borderWidth:0,
        shadow:false,
        formatter:function () {
          if (navigator.userAgent.match(/msie/i)) {
            var response = setup.who + " " + this.x.split("|")[0] + " Fans : " + StringHelper.numberFormat(parseInt(this.y), 'flatCommas');
            return response;
          } else {
            var response = setup.who + " " + this.x.split("|")[0] + "<br/>Fans : " + StringHelper.numberFormat(parseInt(this.y), 'flatCommas');
            return response;
          }
        }
      },
      "series":[
        {
          "name":"series",
          "data":setup.data
          //  "data": [1232, 4673, 1823, 186, 85, 15, 36]

        }
      ]

    });

Answer 1

有很多方法可以实现这一目标。

1）使用内置标签选项：http://api.highcharts.com/highcharts#labels

2）对y轴使用tickPositions属性，并根据需要格式化标签：http://api.highcharts.com/highcharts#yAxis.tickPositions

3）使用带有数据标签的散点图系列。将点放在您需要的位置，格式化数据标签，将散点的标记半径设置为0，或将颜色设置为＆＃39; rgba（255,255,255,0）＆＃39;

4）使用宽度为0的情节线，并相应地格式化标签

5）使用渲染器功能绘制自己的标签http://api.highcharts.com/highcharts#Renderer

<强>更新

上述大多数选项可能要求您调整边距和/或间距设置，具体取决于放置元素的位置，因为图表不会像对轴标签或标题那样自动调整这些元素。