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)
        }
    ]
});

发表评论

邮箱地址不会被公开。 必填项已用*标注