Highcharts甜甜圈图定制

佐海·扎曼(Zohair Zaman)

我正在与highcharts一起工作,旨在制作类似于以下内容的图表: Highcharts甜甜圈图

现在,我已经经历了一段时间的磨难,现在我已经能够达到以下几点:http : //jsfiddle.net/ccjSy/24/

$(function () {
    $(document).ready(function () {
        var chart = null;               
        var categories = ['Body Fat', 'Lean Mass'],
            name = 'Body Fat vs. Lean Mass',
            data = [{
                y: 69,
                color: '#F0CE0C',
                drilldown: {
                    name: 'Body Fat', 
                    color: '#F0CE0C'
                }
            }, {
                y: 207,
                color: '#23A303',
                drilldown: {
                    name: 'Lean Mass' ,
                    color: '#23A303'
                }
            }];


        // Build the data array
        var browserData = [];
        for (var i = 0; i < data.length; i++) {

            // add browser data
            browserData.push({
                name: categories[i],
                y: data[i].y,
                color: data[i].color
            });

        }

        // Create the chart
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'donutchart',
                type: 'pie',
                spacingTop: 0
            },
            title: {
                text: 'Your Body Fat vs Lean Mass',
                style: {"color": '#7d7d7d'}
            },
            series: [{
                name: 'Weight',
                data: browserData,
                dataLabels: {
                    style: {
                        fontFamily: 'ArialMT',
                        fontSize: '15px',
                        fontWeight: 'bold',
                        color: '#7d7d7d'
                    }
                },
                innerSize: '70%'
            }],
            tooltip: {
                valueSuffix: ' lbs'
            },
            plotOptions: {
                series: {
                    cursor: 'pointer'
                }
            }
        });
    });
});

我正在考虑在甜甜圈图中将空间保留为空,并使用“重量”标签插入自定义圆圈。但是,我不确定如何解决以下问题:
1)在两列之间保留更多定义的空白
2)如何正确对齐两个数据标签?(正如您在模型中看到的那样,它们在一条直线上并附有中性线)
3)如何在两个标签下方显示数据,磅和百分比都显示在图像中,如图所示。

酷博士

回答您的三个问题:

  1. 列之间是否有更多空格? ”-添加一个plotOptions.pie.borderWidth元素。默认值为1。我使用5为其提供了更多的空白。
  2. “是否正确对齐两个数据标签? ”-您可以startAngle基于两个数据值计算自定义,这将为您提供正确的开始角度。由于系列中只有两个数据值,因此很容易。

    计算饼图的startAngle

    var startAngle = 0 - (90 + (180 * (data[0].y / (data[0].y + data[1].y))));
    

    请注意,如果您更改y第一个数据对象值,即使饼图的部分变大或变小,饼图的“ Body Fat”部分仍将保持其正确位置。

  3. 使用自定义格式在两个标签下面显示数据吗? ”-用于plotOptions.pie.format将自定义格式应用于饼图值标签。

    format: '<div style="position: relative; top: -20px; text-align: center">{point.name}<br><b><span style="font-size: 29px">{point.percentage:.0f}%</span></b> ({point.y} lbs)</div>'
    

这是工作的JSFiddle来查看结果。您仍然需要在饼图的后面添加一个深灰色的圆圈,并添加“总重量”文本,但这并不难。

因为我敢肯定您会对此感到疑惑,所以我要指出的是,饼图标题下有很多空白,因为它为在饼图的上方或下方显示的其他标签留出了足够的空间。由于您仅使用两个始终位于饼图左侧/右侧的值,因此不会改变HighCharts准备在周围区域显示其他标签的事实。

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

AchartEngine中甜甜圈图的半径

来自分类Dev

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

来自分类Dev

Highcharts甜甜圈标签溢出容器

来自分类Dev

FXML中的Javafx甜甜圈图

来自分类Dev

在Highcharts甜甜圈图的工具提示上添加自定义数据

来自分类Dev

Highcharts甜甜圈图渲染中缺少的颜色

来自分类Dev

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

来自分类Dev

Chartjs嵌套饼图/甜甜圈图

来自分类Dev

d3饼图和甜甜圈图

来自分类Dev

ChartJS甜甜圈图渐变填充

来自分类Dev

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

来自分类Dev

更改甜甜圈图的边框颜色

来自分类Dev

饼图或甜甜圈图单击侦听器

来自分类Dev

CSS圈甜甜圈图透明背景

来自分类Dev

Excel / VBA:向甜甜圈图添加标题会减小甜甜圈的大小

来自分类Dev

如何清理甜甜圈图?

来自分类Dev

使甜甜圈图可点击

来自分类Dev

将甜甜圈图修改为“进步甜甜圈图”

来自分类Dev

如何删除甜甜圈图边框

来自分类Dev

用图绘制甜甜圈图

来自分类Dev

Highcharts甜甜圈用于内部和外部饼图的单独工具提示

来自分类Dev

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

来自分类Dev

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

来自分类Dev

Highcharts甜甜圈标签溢出容器

来自分类Dev

jq图不显示甜甜圈

来自分类Dev

Highcharts-嵌套的切片甜甜圈图

来自分类Dev

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

来自分类Dev

d3饼图和甜甜圈图

来自分类Dev

d3.js甜甜圈图,外面有甜甜圈图例