如何使用Hightchart-ng制作Highcharts半圆甜甜圈图

迈克尔·马洪

我正在尝试在我的角度应用程序中创建Highcharts半圆甜甜圈图。我已经安装了Highcharts-ng指令。无论出于何种原因,它似乎都完全跳过了plotOptions部分,并且在那儿设置了起始角度和结束角度,从而创建了甜甜圈。我得到的是一个完整的圆形饼图。这是我的代码:

<div ng-app="myapp">
    <div ng-controller="myctrl">
        <highchart id="chart1" config="highchartsNG"></highchart>
    </div>
</div>

    //See: https://github.com/pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {

    $scope.options = {
        type: 'pie',
        colors: ['#971a31', '#ffffff']
    }

    $scope.swapChartType = function () {
        if (this.highchartsNG.options.chart.type === 'line') {
            this.highchartsNG.options.chart.type = 'bar'
        } else {
            this.highchartsNG.options.chart.type = 'line'
        }
    }

    $scope.highchartsNG = {
        options: {
            colors: ['#971a31', '#ffffff'],
            chart: {
                type: 'pie',
                backgroundColor: '#f1f1f2',
                height: 150
            }
        },
        series: [{
            data: [10, 15, 12, 8, 7]
        }],
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: 0,
            plotShadow: false
        },
        title: {
            text: 'Hello',
            style: {
                color: '#971a31',
                fontWEight: 'bold',
                fontSize: '15px'
            },
            verticvalAlign: 'middle',
            y: 20,
            x: -24
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'  
        },
        plotOptions: {
            pie: {
                borderColor: '#000000',
                size: 115,
                dataLabels: {
                    enabled: false,
                    distance: -50,
                    style: {
                        fontWeight: 'bold',
                        color: 'white',
                        textShadow: '0px 1px 2px black',

                    }

                },
                startAngle: -90,
                endAngle: 90,
                center: ['30%', '75%']
            }
        },
        series: [{
            type: 'pie',
            name: 'Loan',
            innerSize: '50%',
            data: [
                ['85% paid', 85],
                ['15% owed', 15]

            ]
        }],
        loading: false
    }

});

我在这里创建了一个JSFiddle:

http://jsfiddle.net/mikemahony/hzdewsx8/

我想念什么?

卡尔提克

Highcharts-ng指令需要将这些属性放在选项下。

$scope.highchartsNG = { 
    options:{
        plotOptions: {
            pie: {
                dataLabels: {
                    enabled: true,
                    distance: -50,
                    style: {
                        fontWeight: 'bold',
                        color: 'white',
                        textShadow: '0px 1px 2px black'
                    }
                },
                startAngle: -90,
                endAngle: 90,
                center: ['50%', '75%']
            }
        }
    },

在highchartsNGConfig中,options属性是一个标准的highcharts options对象。例如,您可以传递到新的Highcharts.Chart(options)中的任何内容;在这里工作。

监视此选项对象的更改。当此处发生更改时,将重新创建整个图表。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用Hightchart-ng制作Highcharts半圆甜甜圈图

来自分类Dev

如何使用highcharts创建甜甜圈图?

来自分类Dev

如何使用highcharts创建甜甜圈图?

来自分类Dev

尝试使用 dql 结果 chartjs 制作甜甜圈图

来自分类Dev

如何从highchart中的相应位置开始半圆甜甜圈图角度?

来自分类Dev

如何在配置中控制HightChart饼图/甜甜圈图标签的font-weight

来自分类Dev

应对:如何制作半个甜甜圈

来自分类Dev

如何清理甜甜圈图?

来自分类Dev

如何删除甜甜圈图边框

来自分类Dev

如何在ggplot2中使用facet_grid制作甜甜圈图?

来自分类Dev

如何使用ng2-chart更新甜甜圈图的CSS

来自分类Dev

如何在带有图例的甜甜圈图的中间显示标题?(react-highcharts)

来自分类Dev

如何从geom_tile中制作一个甜甜圈图

来自分类Dev

如何使用ChartJs改变甜甜圈图的厚度?

来自分类Dev

如何找到饼图/甜甜圈图的半径

来自分类Dev

如何实现D3甜甜圈图?

来自分类Dev

如何在IE中显示SVG甜甜圈图?

来自分类Dev

如何建立触发时旋转的双甜甜圈图

来自分类Dev

如何在IE中显示SVG甜甜圈图?

来自分类Dev

如何在Highchart中更改甜甜圈图的颜色?

来自分类Dev

使用Google图表创建多级甜甜圈图

来自分类Dev

如何使用数据库中的数据绘制Google饼图(或甜甜圈图)

来自分类Dev

如何使用easypiechart.js创建甜甜圈饼图?

来自分类Dev

如何使用jqplot将数据标签放置在带有线的甜甜圈图之外?

来自分类Dev

如何在Xamarin.android中使用oxyplot创建甜甜圈图?

来自分类Dev

如何使用Chart.js在甜甜圈图的中心添加文本?

来自分类Dev

HTML / JS画布甜甜圈图如何使用ovlerap创建圆笔画?

来自分类Dev

如何使用amcharts创建多环甜甜圈饼图?

来自分类Dev

如何在Xamarin.android中使用oxyplot创建甜甜圈图?

Related 相关文章

  1. 1

    如何使用Hightchart-ng制作Highcharts半圆甜甜圈图

  2. 2

    如何使用highcharts创建甜甜圈图?

  3. 3

    如何使用highcharts创建甜甜圈图?

  4. 4

    尝试使用 dql 结果 chartjs 制作甜甜圈图

  5. 5

    如何从highchart中的相应位置开始半圆甜甜圈图角度?

  6. 6

    如何在配置中控制HightChart饼图/甜甜圈图标签的font-weight

  7. 7

    应对:如何制作半个甜甜圈

  8. 8

    如何清理甜甜圈图?

  9. 9

    如何删除甜甜圈图边框

  10. 10

    如何在ggplot2中使用facet_grid制作甜甜圈图?

  11. 11

    如何使用ng2-chart更新甜甜圈图的CSS

  12. 12

    如何在带有图例的甜甜圈图的中间显示标题?(react-highcharts)

  13. 13

    如何从geom_tile中制作一个甜甜圈图

  14. 14

    如何使用ChartJs改变甜甜圈图的厚度?

  15. 15

    如何找到饼图/甜甜圈图的半径

  16. 16

    如何实现D3甜甜圈图?

  17. 17

    如何在IE中显示SVG甜甜圈图?

  18. 18

    如何建立触发时旋转的双甜甜圈图

  19. 19

    如何在IE中显示SVG甜甜圈图?

  20. 20

    如何在Highchart中更改甜甜圈图的颜色?

  21. 21

    使用Google图表创建多级甜甜圈图

  22. 22

    如何使用数据库中的数据绘制Google饼图(或甜甜圈图)

  23. 23

    如何使用easypiechart.js创建甜甜圈饼图?

  24. 24

    如何使用jqplot将数据标签放置在带有线的甜甜圈图之外?

  25. 25

    如何在Xamarin.android中使用oxyplot创建甜甜圈图?

  26. 26

    如何使用Chart.js在甜甜圈图的中心添加文本?

  27. 27

    HTML / JS画布甜甜圈图如何使用ovlerap创建圆笔画?

  28. 28

    如何使用amcharts创建多环甜甜圈饼图?

  29. 29

    如何在Xamarin.android中使用oxyplot创建甜甜圈图?

热门标签

归档