Question

我正在创建标签相互冲突的RGraph饼图。尽管我正在使用labels.sticks属性来解决此问题，但它对输出没有影响。

这是我绘制饼图的代码：

<script type="text/javascript">
$(document).ready(function(){
        // Some data that is to be shown on the pie chart. It should be an array of numbers.
        var data = [6.3, 2.1, 1.1, 3.2, 7.4, 10.5, 5.3, 27.4, 1.1, 4.2];
        var labels = ['Data Loggers 6', 'Data Translation   2', 'Energy Loggers 1', 'Hobo   3', 'iButton    7', 'ICP    10', 'MCC   5', 'Monnit 26', 'Orchestrator  1', 'Sensors    4'];

        for(var i = 0; i < data.length; i++)
        {
            labels[i] = labels[i] + ', ' + data[i] + '%';
        }

        var colors_arr = new Array('#00FFFF', '#7FFFD4', '#FFE4C4', '#0000FF', '#8A2BE2', '#A52A2A', '#7FFF00', '#FF7F50', '#B8860B', '#A9A9A9', '#8B008B', '#FF1493', '#228B22', '#DAA520', '#20B2AA', '#87CEFA', '#6B8E23', '#FF0000', '#FFFF00', '#F5DEB3');
        var colors = new Array();

        for(var i = 0; i < data.length; i++)
        {
            colors[i] = colors_arr[i];
        }

        // Create the Pie chart
        var pie = new RGraph.Pie({
            id: 'report_prospects_qty_products_canvas' ,
            data: data,
            options: {
                labels: {
                    self: labels,
                    sticks: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
                },
                tooltips: {
                    self: labels,
                    //event: 'onmousemove',
                },
                shadow: false,
                strokestyle: 'transparent',
                title: {
                    self: 'Products',
                    bold: false,
                    y: 10
                },
                radius: 70,
                colors: colors,
            text: {
                size: 8,
                color: "red",
                angle: 45
            },

            },
        }).roundRobin();

        $('#report_prospects_qty_products_wrapper').mouseout(function(){
            // Hide the tooltip
            RGraph.hideTooltip();
            // Redraw the canvas so that any highlighting is gone
            RGraph.redraw();
        });
});
</script>

HTML

<!-- Put this where you want the chart to show up: -->
<div id="cvs_wrapper">
    <!-- An example of using CSS to resize the canvas tag. -->
    <canvas id="report_prospects_qty_products_canvas" width="600" height="250" style="width:100%;">[No canvas support]</canvas>
</div>

输出：

要解决标签冲突问题，我正在使用以下选项：

            options: {
                labels: {
                    self: labels,
                    sticks: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
                },

根据RGraph文档：

labels.sticks规定显示标签的粘贴条。这个也可以是棍子长度的数组-如果您遇到标签冲突。默认值：false

仅供参考，我正在使用// version: 2015-05-24

Answer 1

从您发布的配置代码来看，我猜您可能正在使用旧版本。当前版本（当前为5.0）使用了更好的标签排列方式，因此不会发生冲突（除非您有很多标签）。

这里有一个演示页面，很好地展示了这种新方法：

https://www.rgraph.net/demos/pie-basic.html

与此相关的代码与您可能习惯的代码没有什么不同

labels = [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' ];

new RGraph.Pie({
    id: 'cvs',
    data: [20,1,1,1,1,1,1],
    options: {
        tooltips: labels,
        labels: labels,
        shadow: false,
        colorsStroke: 'rgba(0,0,0,0)',
        exploded: 0
    }
}).roundRobin();

如何解决RGraph饼图中的标签冲突问题？

1 个答案: