Charts 如何避免饼图中的标签重叠?

Charts 如何避免饼图中的标签重叠?,charts,label,placement,Charts,Label,Placement,我希望避免在我正在绘制的饼图中出现文本标签重叠的情况: 是否有一种“公认”的方法来做到这一点?ie是一种特殊的文本放置算法吗 如果没有,那么如何有效地做到这一点 编辑:使其看起来类似于此类型的标签放置: 更新: 我有一个更好的系统来组织标签,它只列出相关侧的标签,然后将每个标签的线条添加到相应的线段 您可以在此处看到一个示例: 创建该图表的代码是: <script src="RGraph.common.core.js"></script> <

我希望避免在我正在绘制的饼图中出现文本标签重叠的情况:

是否有一种“公认”的方法来做到这一点?ie是一种特殊的文本放置算法吗

如果没有,那么如何有效地做到这一点

编辑:使其看起来类似于此类型的标签放置:

更新:

我有一个更好的系统来组织标签,它只列出相关侧的标签,然后将每个标签的线条添加到相应的线段

您可以在此处看到一个示例:

创建该图表的代码是:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.pie.js"></script>

<canvas id="cvs" width="350" height="250">
    [No canvas support]
</canvas>

<script>
    // A basic configuration for a Pie chart with just the labels
    // separated out into their own array. This is because the same
    // array is used for both the labels and the tooltips so
    // doing this makes for less upkeep when the time comes to
    // change things around.
    //
    // Also note that the stroke color has been set to transparent so
    // that there's no separation between the segments
    //
    labels = [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

    new RGraph.Pie({
        id: 'cvs',
        data: [20,1,1,1,1,1,1],
        options: {
            
            // This is the tooltip property using formatted tooltips
            tooltips: '%{property:myDaynames[%{index}]}<br /><span style="font-weight: bold; font-size:26pt">%{value_formatted}</span>',
            
            // The units that are appended to the %{value_formatted} value
            tooltipsFormattedUnitsPost: '%',
            
            // Some CSS values that are set on the tooltips so that you can customise them
            tooltipsCss: {
                backgroundColor: 'white',
                border: '3px solid black'
            },

            // A custom property - the formatted tooltips can then
            // access this to use the data inside the tooltip
            myDaynames: labels,

            shadow: false,
            colorsStroke: 'transparent',
            keyPositionGraphBoxed: false,
            
        }
    // Draw the chart
    }).draw();
</script>

[无画布支持]
//仅包含标签的饼图的基本配置
//分离成自己的阵列。这是因为同样的原因
//数组用于标签和工具提示,因此
//这样做会在需要的时候减少保养
//改变现状。
//
//还请注意,笔划颜色已设置为透明,因此
//各部分之间没有分离
//
标签=[‘星期一’、‘星期二’、‘星期三’、‘星期四’、‘星期五’、‘星期六’、‘星期日’];
新RGraph.Pie({
id:'cvs',
数据:[20,1,1,1,1,1,1,1],
选项:{
//这是使用格式化工具提示的工具提示属性
工具提示:“{property:myDaynames[%{index}]}
%{value\u-formatted}”, //附加到%{value\u formatted}值的单位 tooltipsFormattedUnitsPost:“%”, //在工具提示上设置的一些CSS值,以便您可以自定义它们 工具提示CSS:{ 背景颜色:“白色”, 边框:“3件纯黑” }, //自定义属性-然后可以使用格式化的工具提示 //访问此选项可使用工具提示中的数据 myDaynames:标签, 影子:错, 颜色行程:“透明”, KeyPositionGraphBox:错误, } //画图表 }).draw();
请在此处发布解决方案,外部的任何解决方案参考都可能很容易丢失。是的,现在的答案是断开的链接