我们可以在Highcharts中使用动态自定义数组设置条形标签吗?

时间:2016-03-15 15:25:12

标签: highcharts

我认为这是图书馆的错误。 我想在每个栏上都有自定义标签,但它不起作用!



var options = {
  chart: {
    type: 'column'
  },
  plotOptions: {

    series: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        formatter: function() {
          if (this.series.options.myLabels) {
            return "XXX: " + this.series.options.myLabels[this.point.x];
          }
        }
      }
    }
  },


  exporting: {
    url: 'http://export.highcharts.com/',
    chartOptions: {
      yAxis: {
        labels: {
          style: {
            color: 'green'
          }
        }
      }
    }
  },

  yAxis: {
    labels: {
      style: {
        color: 'red'
      },
      format: '{value:,.0f}'
    }
  },
  series: [{
      type: 'column',
      data: [10000, 20000, 8000],
      myLabels: ["A", "B", "C"]
    }, {
      type: 'column',
      data: [10000, 2000, 10000]
    }, {
      type: 'spline',
      data: [5000, 15000, 5000]
    }

  ]
};

var globals = {
  lang: {
    thousandsSep: ','
  }
}

$('#export').click(function() {
  var obj = {},
    exportUrl = options.exporting.url;
  obj.options = JSON.stringify(options);
  obj.globaloptions = JSON.stringify(globals);
  obj.type = 'image/png';
  obj.async = true;

  $.ajax({
    type: 'post',
    url: exportUrl,
    data: obj,
    success: function(data) {
      var imgContainer = $("#imgContainer");
      $('<img>').attr('src', exportUrl + data).attr('width', '450px').appendTo(imgContainer);

    }
  });


});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="export">get image</button>
<div id="imgContainer"></div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

JSON不是bug,因为你无法将函数放在json中。函数不可执行且被跳过。因此,您需要使用回调,并将您的函数放在series.update();

修正演示: - http://jsfiddle.net/ayyunrb4/