Как решить проблему с конфликтами меток в круговой диаграмме RGraph? - PullRequest
Новая
       22

Как решить проблему с конфликтами меток в круговой диаграмме RGraph?

1 голос
/ 13 мая 2019

Я создаю круговую диаграмму 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>

Вывод:

enter image description here

Чтобы устранить проблему с конфликтом этикеток, я использую следующую опцию: 

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

В соответствии с документацией RGraph:

label.sticks Показаны стилулы, которые придерживаются этикеток.Это также может быть массив значений длины флешки, что может быть полезно, если вы сталкиваетесь со столкновением меток.По умолчанию: false

К вашему сведению, я использую // version: 2015-05-24

1 Ответ

0 голосов
/ 13 мая 2019

Судя по приведенному вами фрагменту конфигурации, я предполагаю, что вы, возможно, используете более старую версию. В текущей версии (в настоящее время 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();
...