1

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

甚至可以使用 Highchartsmethods吗？与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>';
          }
        }
    }]
  };
});
4

3 回答 3

2

这可以使用当前版本完成，而文档尚不清楚。在源代码中，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();

例如，我在这里分叉了原始的 plunk：http://plnkr.co/edit/6WvHEjJfr4pGqd2OvPKF?
p =preview

于 2015-01-07T18:17:03.090 回答
1

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

请参阅此处以跟踪更改：https ://github.com/pablojim/highcharts-ng/issues/97

于 2014-03-21T13:04:35.053 回答
0

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

于 2017-03-09T07:46:34.617 回答