如何在highchart中创建这样的饼图/圆环图?

时间:2016-02-21 19:11:03

标签: javascript html highcharts pie-chart donut-chart

我今天刚开始使用高图。我有以下查询。任何人都可以帮助我吗?

$(function () {

    var colors = Highcharts.getOptions().colors,
        categories = ['HIGH', 'MODERATE', 'CRITICAL'],
        data = [{
            y: 33.33,
            color: '#a6b9c1',
            drilldown: {
                name: 'MSIE versions',
                categories: ['MSIE 6.0', 'MSIE 7.0'],
                data: [0.5, 0.5],
                color: ['#30add9','#306885']
            }
        }, {
            y: 33.33,
            color: '#a6b9c1',
            drilldown: {
                name: 'Firefox versions',
                categories: ['Firefox v31', 'Firefox v32'],
                data: [0.5, 0.5],
                color: ['#30add9','#306885']
            }
        }, {
            y: 33.33,
            color: '#a6b9c1',
            drilldown: {
                name: 'Chrome versions',
                categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0'],
                data: [0.34, 0.33, 0.33],
                color: ['#23377b','#30add9','#306885']
            }
        }],
        browserData = [],
        versionsData = [],
        i,
        j,
        dataLen = data.length,
        drillDataLen,
        brightness;


    // Build the data arrays
    for (i = 0; i < dataLen; i += 1) {

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

        // add version data
        drillDataLen = data[i].drilldown.data.length;
        for (j = 0; j < drillDataLen; j += 1) {
            versionsData.push({
                name: data[i].drilldown.categories[j],
                y: data[i].drilldown.data[j],
                color: data[i].drilldown.color[j]
            });
        }
    }

    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'pie'
        },
        title: {
            text: 'OUR<br>MATERIAL<br>ISSUES',
            align: 'center',
            verticalAlign: 'middle',
            y: 0
        },
        subtitle: {
            text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>'
        },
        plotOptions: {
            pie: {
                shadow: false,
               // borderWidth:10,
                center: ['50%', '50%'],
                slicedOffset: 10,
                 states: {
                    hover: false
                }
            }
        },
       tooltip: {
            enabled: false 
       },
        series: [{
            name: 'Browsers',
            data: browserData,
            size: '60%',
            innerSize: '50%',
            dataLabels: {
                formatter: function () {
                    return this.point.name;
                },
                color: '#3f377f',
                rotation: -20,
              //  rotation: rotate(),
                distance: -40
            }
        }, {
            name: 'Versions',
            data: versionsData,
           // borderWidth:0,
            size: '100%',
            innerSize: '60%',
            dataLabels: {
                //  useHTML:true,
                formatter: function () {
                    return this.point.name;
                },
                color: '#000'
                //inside:true

            },
            allowPointSelect: false,
                stickyTracking: false,
                point: {
                    events: {
                        mouseOver: function() {
                            var point = this,
                                points = this.series.points;

                            // unslice sliced element(s)
                            for (var key in points) {
                                if (points[key].sliced) {
                                    points[key].slice(false);
                                }
                            }

                            // slice hovered element
                            if (!point.selected) {
                                point.slice(true);
                            }
                        }
                    }
                },
                events: {
                    mouseOut: function(event) {
                        // unslice sliced element(s)
                        for (var key in this.points) {
                            if (this.points[key].sliced) {
                                this.points[key].slice(false);
                            }
                        }
                    }
                }
        }]
    });
});

FIDDLE

在第一级,有3个级别 - 高,严重和中等。如果我使用旋转:-20&amp;距离:-40它与关键标签正确对齐。我希望所有3个标签都有这种类型的对齐方式。谁能帮我怎么做?

我还想根据附加图像在第二级添加数据。每个数据都有一个与之关联的超链接。到目前为止,你只能看到一个标签--MSIE 6和类似的,代替那个,我想添加多个看起来像附加图像的标签。我已经尝试了很多,但无法操纵。enter image description here

更新 - 我已经处理了其他一些事情并且还使图表响应。但我对此有一些疑问。

  1. 是否可以在图像中显示内部标签 - HIGH,CRITICAL和MODERATE?

  2. 我在二级甜甜圈图表中看到了ul-li结构的信息。截至目前,您已使用<br>标记来打破该行,但由于此图表也具有响应性,因此我们无法为div提供宽度,以便在调整大小的情况下,如果数据输出,则会受所有7个切片的div宽度约束 - DONE

  3. 此外,还有div内部的跨度自动上下左右,这就是为什么整个信息ul-li结构有点下降的原因。是否可以根据位置计算每个2级圆环图并应用它?我无法理解如何将动态css应用于它

  4. ul中的每个li都有一个链接。所以点击那个李 - 我可以去那个特定的页面 - 我试图应用它但是成功了。 -

    名:

    <ul><li><a href="http://wikipedia.org" target="_blank">text in first line</a></li><li>second line</li><li>third line<br/>that was long</li></ul>
    

    这就像一个魅力。但点击后,如果我从打开的页面回到那个页面,切片效果仍然存在,有什么我可以做的吗?

  5. 在1级圆环图上,有3个标签。但是在它们之外,2个具有不同的结构,1个具有另一种结构。我不明白背后的原因。如果您可以打开开发人员工具并检查它们,您就可以清楚地看到差异。一个人有<g> - <text> - <tspan>而另一人有<div> - <span>任何人都可以解释一下吗?

1 个答案:

答案 0 :(得分:1)

让我们将此图表分为两个问题:

  1. 轮播数据标签 - 可以按dataLabel - API reference设置轮播。可以创建一个自动为所有dataLabels设置轮换的函数。
  2. 类似主题:Rotating dataLabels in a Highcharts pie chart

    Grzegorz's solution具有不同的旋转角度,可以更好地匹配您的图表:http://jsfiddle.net/j7as86gh/12/

    1. 切片中的文字 - 如果您的图表足够大以适应所有文字,则dataLables可以解决此问题。要在每个切片中启用包含点的列表,您可以为useHTMLtrue设置为dataLabels
    2. a)http://jsfiddle.net/3v3xfh6e/

      另一种方法是使用工具提示显示每个切片的信息。

      b)http://jsfiddle.net/3v3xfh6e/1/