highcharts绘制环形配比图

highcharts绘制k线的常用配置

之前看的都是中文文档，绘制环形配比图这个需求采用highcharts，想挑战一下自己，看一下英文的文档，结果苦逼的挨个敲出来试看是什么东西…

中文的api也有很多，现在将自己的代码贴出来，省的以后哪天想用的时候还要再过一遍，里面基本都写了注释，普通的需求基本都满足了。之后再分享一篇关于k线的配置。

$("#container").highcharts({
    chart: { //图表整体设置
        type: "pie" //图表样式为饼图
    },
    title: { //图表标题设置
        text: '<span style="color:#333333;font-size:.33rem;">' + ismDuring + '天</span><br/>',
        verticalAlign: "top",
        align: "left",
        x: 0.92 * FS,
        y: 1.34 * FS
    },
    subtitle: { //图表副标题设置
        text: '<span style="font-size:.24rem;text-align:center;color:#979797;">运作期</span>',
        verticalAlign: "top",
        align: "left",
        x: 0.92 * FS,
        y: 1.78 * FS
    },
    plotOptions: { //图表
        pie: {
            center: [0.9 * FS, 1 * FS],
            allowPointSelect: false,
            showInLegend: true, //是否显示图例
            ignoreHiddenPoint: true,
            size: 2.5 * FS, //饼图的大小
            innerSize: 2.16 * FS, //圆环的大小
            colors: [ //圆环颜色，如果数据多于颜色的个数，则颜色会重复出现
                "#df4935", "#f38f28", "#e9da59", "#73d84b", "#3adfd2", "#20acff", "#275caa", "#8d84f0"
            ],
            dataLabels: {
                enabled: false //图表区块的解释，小黑线伸出来的部分
            },
            point: {
                events: {
                    legendItemClick: function() {
                        return false; //图表的legend是否可以点击，如果可以 点击则取消
                    }
                }
            }
        },
        series: {
            allowPointSelect: true, //click的时候能否移出来
            enableMouseTracking: true //hover到饼上面不显示外宽
        }
    },
    legend: { //图例
        layout: "vertical", //图例布局： 垂直排列,
        verticalAlign: "middle",
        align: "right",
        y: 0 * FS,
        x: 0 * FS,
        labelFormatter: function() { //图例显示的内容
            return '<span style="width:1.55rem;display:inline-block;font-size:.18rem;color:#666666;font-weight:100;">' + this.name + '</span><span style="color:#666666;font-weight:100;font-size:.18rem;">' + this.percentage.toFixed(2) + '%</span>'
        },
        useHTML: true,
        itemWidth: 3.5 * FS,
        symbolWidth: 0.16 * FS,
        symbolHeight: 0.16 * FS,
        rtl: false //图表是否在右边
    },
    tooltip: { //提示框
        enabled: false,
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b><br/>'
    },
    credits: {
        enabled: false
    },
    series: [ //数据
        {
            name: "推荐策略",
            colorByPoint: true,
            data: filterJson(data)
        }
    ]
});