Javascript 交互式甜甜圈网络图

我有一个图表，我正试图让它更方便用户使用，我不断遇到问题，试图添加一件事，其他一些事情出了问题

我试图做到的是：图表从一个处于“悬停”状态开始。当一个悬停，它有一个边界，以及在图表中间的文字与标签和百分比更新。我还希望背景是SVG图像（如果不可能，也不重要）

我已经做了一个-我也想删除工具提示了

任何帮助都将不胜感激

IMG我试图完成的目标：

我的HTML代码：

<div id="doughnutChart" class="chart"></div>

---

在不修改原始插件的情况下，您可以覆盖默认设置

对于out stroke，您可以绘制其他图表，将其隐藏，然后使用插件公开的

afterDrawed

，

onPathEnter

，

onPathLeave

回调来执行逻辑

对于每个饼图段的背景，您可以使用

Javascript：

var firstSelected = 0;

var seed = [
    { title: "Holiday Fund", value : 5,  color: "url(#dots2)" },
    { title: "Emergencies", value:  20, color: "url(#diagonal1)" },
    { title: "Loans", value:  20, color: "url(#dots1)" },
    { title: "Widows", value : 27, color: "url(#diagonal2)" },
    { title: "Medical Support", value : 28, color: "url(#hatch1)" },
  ];

var seed2 = [
    { value : 5,  color: "#9fa1ac" },
    { value:  20, color: "#ef5123" },
    { value:  20, color: "#ef5123" },
    { value : 27, color: "#9fa1ac" },
    { value : 28, color: "#ef5123" },
  ];

var chartOptions = {
    baseOffset: 0,
    segmentShowStroke : false,
    segmentStrokeColor : 'transparent',
    baseColor: 'transparent',
    percentageInnerCutout : 60,        
    onPathEnter: function (e, data) {
        var order = $(this).data().order;
        $('#doughnutChart .doughnutSummaryTitle').html(data[order].title);
        $('#doughnutChart .doughnutSummaryNumber').html(data[order].value + '%');
        $('#doughnutChart .doughnutSummary').show();
        $('#doughnutBg g').find('path').fadeOut(300);
        $('#doughnutBg g').find('path:eq('+(order)+')').fadeIn(500)            
    },
    onPathLeave: function (e, data) {
        $('#doughnutBg g').find('path').fadeOut(300);
        $('#doughnutChart .doughnutSummary').hide();
    },
    afterDrawed : function () {
        $('#doughnutChart .doughnutSummaryTitle').html(seed[firstSelected].title);
        $('#doughnutChart .doughnutSummaryNumber').html(seed[firstSelected].value + '%');            
        $('#doughnutChart .doughnutSummary').css({width: '160px', height: '60px', marginLeft: '-80px', marginTop: '-30px'});
        $('#doughnutChart .doughnutSummary').show();
        $('#doughnutBg g').find('path:eq('+firstSelected+')').fadeIn(500);
    }
} ;

var chartOptions2 = {
    baseOffset: 0,
    segmentStrokeColor : 'transparent',        
    segmentShowStroke : false,
    percentageInnerCutout : 95
} ;

jQuery("#doughnutChart").drawDoughnutChart(seed, chartOptions);
jQuery("#doughnutBg").drawDoughnutChart(seed2, chartOptions2);

.chart {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin: -200px 0 0 -200px;
}

.bgchart {
  position: absolute;
  width: 430px;
  height: 430px;
  top: 50%;
  left: 50%;
  margin: -215px 0 0 -215px;
}

.chart .doughnutSummary,
.bgchart .doughnutSummary{
  display: none;
}

.chart path:hover { opacity: 0.65; }
.bgchart path { display: none }

CSS：

var firstSelected = 0;

var seed = [
    { title: "Holiday Fund", value : 5,  color: "url(#dots2)" },
    { title: "Emergencies", value:  20, color: "url(#diagonal1)" },
    { title: "Loans", value:  20, color: "url(#dots1)" },
    { title: "Widows", value : 27, color: "url(#diagonal2)" },
    { title: "Medical Support", value : 28, color: "url(#hatch1)" },
  ];

var seed2 = [
    { value : 5,  color: "#9fa1ac" },
    { value:  20, color: "#ef5123" },
    { value:  20, color: "#ef5123" },
    { value : 27, color: "#9fa1ac" },
    { value : 28, color: "#ef5123" },
  ];

var chartOptions = {
    baseOffset: 0,
    segmentShowStroke : false,
    segmentStrokeColor : 'transparent',
    baseColor: 'transparent',
    percentageInnerCutout : 60,        
    onPathEnter: function (e, data) {
        var order = $(this).data().order;
        $('#doughnutChart .doughnutSummaryTitle').html(data[order].title);
        $('#doughnutChart .doughnutSummaryNumber').html(data[order].value + '%');
        $('#doughnutChart .doughnutSummary').show();
        $('#doughnutBg g').find('path').fadeOut(300);
        $('#doughnutBg g').find('path:eq('+(order)+')').fadeIn(500)            
    },
    onPathLeave: function (e, data) {
        $('#doughnutBg g').find('path').fadeOut(300);
        $('#doughnutChart .doughnutSummary').hide();
    },
    afterDrawed : function () {
        $('#doughnutChart .doughnutSummaryTitle').html(seed[firstSelected].title);
        $('#doughnutChart .doughnutSummaryNumber').html(seed[firstSelected].value + '%');            
        $('#doughnutChart .doughnutSummary').css({width: '160px', height: '60px', marginLeft: '-80px', marginTop: '-30px'});
        $('#doughnutChart .doughnutSummary').show();
        $('#doughnutBg g').find('path:eq('+firstSelected+')').fadeIn(500);
    }
} ;

var chartOptions2 = {
    baseOffset: 0,
    segmentStrokeColor : 'transparent',        
    segmentShowStroke : false,
    percentageInnerCutout : 95
} ;

jQuery("#doughnutChart").drawDoughnutChart(seed, chartOptions);
jQuery("#doughnutBg").drawDoughnutChart(seed2, chartOptions2);

.chart {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin: -200px 0 0 -200px;
}

.bgchart {
  position: absolute;
  width: 430px;
  height: 430px;
  top: 50%;
  left: 50%;
  margin: -215px 0 0 -215px;
}

.chart .doughnutSummary,
.bgchart .doughnutSummary{
  display: none;
}

.chart path:hover { opacity: 0.65; }
.bgchart path { display: none }

HTML：

<svg width="8cm" height="4cm" viewBox="0 0 800 400" version="1.1"
 xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="hatch1" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10">
      <g style="fill:none; stroke:#ef5123; stroke-width:1">
        <path d="M0,0 l10,10"/><path d="M10,0 l-10,10"/>
      </g>
    </pattern>
    <pattern id="hatch2" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10">
      <g style="fill:none; stroke:#9fa1ac; stroke-width:1">
        <path d="M0,0 l10,10"/><path d="M10,0 l-10,10"/>
      </g>
    </pattern>        
    <pattern id="diagonal1" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(130)">
       <rect x="0" y="0" width="2" height="6" style="stroke:none; fill:#ef5123;" />
    </pattern>
    <pattern id="diagonal2" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(130)">
       <rect x="0" y="0" width="2" height="6" style="stroke:none; fill:#9fa1ac;" />
    </pattern>      
    <pattern id="dots1" x="0" y="0" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
       <circle cx="2" cy="2" r="1" style="stroke:none; fill:#ef5123;" />
    </pattern>
    <pattern id="dots2" x="0" y="0" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
       <circle cx="2" cy="2" r="1" style="stroke:none; fill:#9fa1ac;" />
    </pattern>         
  </defs>
</svg>
<div class="bgchart" id="doughnutBg"></div>
<div class="chart" id="doughnutChart"></div>

---

很接近：将鼠标悬停在第二个图例项上，我会看到鼠标悬停文本。对于我悬停的第一个，它没有显示，可能是因为下面的一行抛出了一个异常“canvas not defined”：canvas.parentNode.parentNode.appendChild（legendHolder.firstChild）；你必须等待它加载-这很好…本质上我不需要工具提示你是一个传奇！谢谢