刷新后图表弧缩小 [英] Chart arcs shrink after refresh

问题描述

我有一个甜甜圈图表，其中某些甜甜圈伸出来。这是屏幕截图。

我们正在使用超时函数使这些片段显示出来：

  setTimeout（function（）{
 chart.internal.expandArc（['A'，'B'，'D']）
}，0） 
  

这里是我的 FIDDLE

我想知道这是一个JavaScript问题还是我可以改变这个问题， / p>

解决方案

您可以再次调用 expandArc 函数，

  onmouseout：function（d，i）{
 chart.internal.expandArc（['A'，'B '，'D']）; 
} 
  

已更新小提琴。

  var currentSlice; var chart = c3.generate（{data：{ x：'x'，columns：[['x'，'2013-01-01'，'2013-01-02'，'2013-01-03'，'2013-01-04'，'2013-01 -05'，'2013-01-06']，['A'，30,200,100,400,150,250]，['B'，130,100,140,​​200,150,50] 'C'，50,100,130,240,200,150]，['D'，130,100,140,​​200,150,50]，['E'，130,150,200,300,200， 100]]，type：'donut'，onclick：function（e）{}，onmouseover：function（d，i）{}，onmouseout：function（d，i）{chart.internal.expandArc（['A'， 'B'，'D']）}}，axis：{x：{type：'timeseries'，tick：{format：'％Y-％m-％d'，centered：true，position：'inner-right '}}}，bindto：'#dash'，bar：{width：{ratio：0.5 //这使得条形宽度为刻度之间长度的50％}，pie：{expand：true，}，tooltip：{grouped： false，contents：function（data，defaultTitleFormat，defaultValueFormat，color）{// console.log（Containt）; // console.log（data，defaultTitleFormat，defaultValueFormat，color）; return< p style ='border：1px solid red;'> + data [0] .value +< / p>; }}}）; setTimeout（function（）{chart.internal.expandArc（['A'，'B'，'D']），0） 

pre-class =snippet-code-css lang-css prettyprint-override> p {line-height：1; font-weight：bold; padding：5px 12px; background：rgba（0，0，0，0.8）; color：#fff; border-radius：4px; line-height：15px; font-size：12px; min-width：91px; }

 < script src =https：// cdnjs .cloudflare.com / ajax / libs / d3 / 3.4.11 / d3.min.js>< / script>< script src =https://cdnjs.cloudflare.com/ajax/libs/c3/ 0.4.10 / c3.js>< / script>< div id =dash>< / div>  

I have a donut chart where certain pieces of the donut sticks out. Here is the screen shot.

The orange, red and blue arcs are sticking out and I want them to stick out permanently however when I hover over any of the pieces they shrink and become normal like this.

we are using a timeout function to make the pieces stick out:

setTimeout(function () {
    chart.internal.expandArc(['A', 'B', 'D'])
}, 0)

Here is my FIDDLE

I was wondering if this is a JavaScript issue or how i can possibly change this to make the arcs stick out permanently.

解决方案

You can call your expandArc function again to reset it on mouseout:

onmouseout: function (d, i) {
  chart.internal.expandArc(['A', 'B', 'D']);
}

Updated fiddle.

var currentSlice;

var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
            ['A', 30, 200, 100, 400, 150, 250],
            ['B', 130, 100, 140, 200, 150, 50],
            ['C', 50, 100, 130, 240, 200, 150],
            ['D', 130, 100, 140, 200, 150, 50],
            ['E', 130, 150, 200, 300, 200, 100]
        ],
        type: 'donut',
        onclick: function (e) {
            
        },
        onmouseover: function (d, i) {
        
            
     
            
            
        },
        onmouseout: function (d, i) {
					chart.internal.expandArc(['A', 'B', 'D'])
        }
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d',
                centered: true,
                position: 'inner-right'
            }
        }
    },

    bindto: '#dash',
    bar: {
        width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
        }

    },
    pie: {
        expand: true,
    },
    tooltip: {
        grouped: false,
        contents: function (data, defaultTitleFormat, defaultValueFormat, color) {
            //  console.log("Containt");
            // console.log(data, defaultTitleFormat, defaultValueFormat, color);
            return "<p style='border:1px solid red;'>" + data[0].value + "</p>";

        }
    }
});

setTimeout(function () {
    chart.internal.expandArc(['A', 'B', 'D'])
}, 0)

 p {
   line-height: 1;
   font-weight: bold;
   padding: 5px 12px;
   background: rgba(0, 0, 0, 0.8);
   color: #fff;
   border-radius: 4px;
   line-height: 15px;
   font-size: 12px;
   min-width: 91px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script>
<div id="dash"></div>

这篇关于刷新后图表弧缩小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！