Question

我尝试使用Highcharts Renderer来创建自己的自定义形状。不幸的是，我找不到调用methods的方法。

甚至可以使用Highcharts methods吗？与highcharts-ng？！

我的代码：

var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {
  $scope.chartDonut = {
    options: {
      chart: {
          type: 'pie',

      },
      colors: [
           '#FFFFFF', 
           '#AA4643', 

      ],
      credits: {
        enabled: false
      },

      legend: {
        borderWidth: 0
      },

      plotOptions: {
        pie: {
          borderWidth: 0.2,
          borderColor: '#000000',
        }
      }
    },

    title: {
        text: 'Browser market share, April, 2011'
    },

    backgroundColor: '#cccccc',
    tooltip: {
        formatter: function() {
            return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
        }
    },
    series: [{
        name: 'Browsers',
        data: [{
              name: 'MATCHED',
                y: 25
            }, {
                name: 'UNMATCHED',
                y: 50,

          color: {
              pattern: 'http://highcharts.com/demo/gfx/pattern1.png',
              width: 6,
              height: 6
          }

            }],

        size: '60%',
        innerSize: '56%',
        showInLegend: false,
        dataLabels: {
          enabled: true,
          connectorWidth: 0,
          connectorPadding: 0,
          useHTML: true,
          x: 20,
          formatter: function() {
              if (this.point.name === 'UNMATCHED') 
                return '<div id="donut_unmatched">'  
                        + '<div id="unmatched_num">' + this.y + '</div>' 
                        + '<div id="unmatched_txt">' + this.point.name + '</div>'
                        + '</div>';
          }
        }
    }]
  };
});

Answer 1

这可以使用当前版本完成，而文档不清楚。在源代码中，调用highcharts构造函数：

new Highcharts.Chart(mergedOptions, func)

第二个参数是highcharts初始化完成时的回调： http://api.highcharts.com/highcharts#Highcharts.Chart（它没有解释其论点）我们可以从这个函数的第一个参数中获取图表对象。将以下代码添加到图表配置对象：

func: function(chart) {
  $scope.chartObj = chart;
}

然后您可以在视图或代码中使用它（对于任何API调用）：

<span>{{chartObj.renderer.height}}</span>

$scope.chartObj.renderer.circle(...);
$scope.chartObj.getSelectedPoints();

作为一个例子，我在这里分叉原始的插件：
http://plnkr.co/edit/6WvHEjJfr4pGqd2OvPKF?p=preview

Answer 2

作者在这里。目前无法做到这一点。拉请求很高兴接受。我可能会在不久的将来自己添加它。

点击此处跟踪更改：https://github.com/pablojim/highcharts-ng/issues/97

Answer 3

我也找不到答案，但是我有一个解决方案，它在xAxis标签格式化函数的格式化程序中调用渲染器，它可以工作..

是否可以使用highchart-ng进行自定义渲染？！

3 个答案: