Highchart活动量表总是在中心显示文字

Question

我想用Highchart的活动量表作为以文字形式围绕数字/图形的某种圆形动画。默认行为是图表中心的文字只有在用户悬停在系列中时才会显示。

有穆斯塔法这里现有的解决方案：http://jsfiddle.net/mushigh/ubb2wz72/

$(function() { 

// Uncomment to style it like Apple Watch 
/* 
if (!Highcharts.theme) { 
    Highcharts.setOptions({ 
     chart: { 
      backgroundColor: 'black' 
     }, 
     colors: ['#F62366', '#9DFF02', '#0CCDD6'], 
     title: { 
      style: { 
       color: 'silver' 
      } 
     }, 
     tooltip: { 
      style: { 
       color: 'silver' 
      } 
     } 
    }); 
} 
// */ 

Highcharts.chart('container', { 

    chart: { 
     type: 'solidgauge', 
     marginTop: 50 
    }, 

    title: { 
     text: 'Activity', 
     style: { 
      fontSize: '24px' 
     } 
    }, 

    tooltip: { 
     borderWidth: 0, 
     backgroundColor: 'none', 
     shadow: false, 
     style: { 
      fontSize: '16px' 
     }, 
     pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>', 
     positioner: function (labelWidth, labelHeight) { 
      return { 
       x: 200 - labelWidth/2, 
       y: 180 
      }; 
     } 
    }, 

    pane: { 
     startAngle: 0, 
     endAngle: 360, 
     background: [{ // Track for Move 
      outerRadius: '112%', 
      innerRadius: '88%', 
      backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(), 
      borderWidth: 0 
     }, { // Track for Exercise 
      outerRadius: '87%', 
      innerRadius: '63%', 
      backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(), 
      borderWidth: 0 
     }, { // Track for Stand 
      outerRadius: '62%', 
      innerRadius: '38%', 
      backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(), 
      borderWidth: 0 
     }] 
    }, 

    yAxis: { 
     min: 0, 
     max: 100, 
     lineWidth: 0, 
     tickPositions: [] 
    }, 

    plotOptions: { 
     solidgauge: { 
      borderWidth: '34px', 
      dataLabels: { 
       enabled: false 
      }, 
      linecap: 'round', 
      stickyTracking: false 
     } 
    }, 

    series: [{ 
     name: 'Move', 
     borderColor: Highcharts.getOptions().colors[0], 
     data: [{ 
      color: Highcharts.getOptions().colors[0], 
      radius: '100%', 
      innerRadius: '100%', 
      y: 80 
     }] 
    }, { 
     name: 'Exercise', 
     borderColor: Highcharts.getOptions().colors[1], 
     data: [{ 
      color: Highcharts.getOptions().colors[1], 
      radius: '75%', 
      innerRadius: '75%', 
      y: 65 
     }] 
    }, { 
     name: 'Stand', 
     borderColor: Highcharts.getOptions().colors[2], 
     data: [{ 
      color: Highcharts.getOptions().colors[2], 
      radius: '50%', 
      innerRadius: '50%', 
      y: 50 
     }] 
    }] 
}, 

/** 
* In the chart load callback, add icons on top of the circular shapes 
*/ 
function callback() { 

    // Move icon 
    this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8]) 
     .attr({ 
      'stroke': '#303030', 
      'stroke-linecap': 'round', 
      'stroke-linejoin': 'round', 
      'stroke-width': 2, 
      'zIndex': 10 
     }) 
     .translate(190, 26) 
     .add(this.series[2].group); 

    // Exercise icon 
    this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8, 'M', 8, -8, 'L', 16, 0, 8, 8]) 
     .attr({ 
      'stroke': '#303030', 
      'stroke-linecap': 'round', 
      'stroke-linejoin': 'round', 
      'stroke-width': 2, 
      'zIndex': 10 
     }) 
     .translate(190, 61) 
     .add(this.series[2].group); 

    // Stand icon 
    this.renderer.path(['M', 0, 8, 'L', 0, -8, 'M', -8, 0, 'L', 0, -8, 8, 0]) 
     .attr({ 
      'stroke': '#303030', 
      'stroke-linecap': 'round', 
      'stroke-linejoin': 'round', 
      'stroke-width': 2, 
      'zIndex': 10 
     }) 
     .translate(190, 96) 
     .add(this.series[2].group); 
}); 

var chart = $('#container').highcharts(), 
     point = chart.series[0].points[0]; 
point.onMouseOver(); // Show the hover marker 
chart.tooltip.refresh(point); // Show the tooltip 
chart.tooltip.hide = function() {}; 
}); 

但问题是，如果我删除2出3默认系列（仅留1），该解决方案不工作了。这是我的小提琴：https://jsfiddle.net/v21zefzs/

$(function() { 

// Uncomment to style it like Apple Watch 
/* 
if (!Highcharts.theme) { 
    Highcharts.setOptions({ 
     chart: { 
      backgroundColor: 'black' 
     }, 
     colors: ['#F62366', '#9DFF02', '#0CCDD6'], 
     title: { 
      style: { 
       color: 'silver' 
      } 
     }, 
     tooltip: { 
      style: { 
       color: 'silver' 
      } 
     } 
    }); 
} 
// */ 

Highcharts.chart('container', { 

    chart: { 
     type: 'solidgauge', 
     marginTop: 50 
    }, 

    title: { 
     text: 'Activity', 
     style: { 
      fontSize: '24px' 
     } 
    }, 

    tooltip: { 
     borderWidth: 0, 
     backgroundColor: 'none', 
     shadow: false, 
     style: { 
      fontSize: '16px' 
     }, 
     pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>', 
     positioner: function (labelWidth, labelHeight) { 
      return { 
       x: 200 - labelWidth/2, 
       y: 180 
      }; 
     } 
    }, 

    pane: { 
     startAngle: 0, 
     endAngle: 360, 
     background: [{ // Track for Exercise 
      outerRadius: '87%', 
      innerRadius: '63%', 
      backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(), 
      borderWidth: 0 
     }] 
    }, 

    yAxis: { 
     min: 0, 
     max: 100, 
     lineWidth: 0, 
     tickPositions: [] 
    }, 

    plotOptions: { 
     solidgauge: { 
      borderWidth: '34px', 
      dataLabels: { 
       enabled: false 
      }, 
      linecap: 'round', 
      stickyTracking: false 
     } 
    }, 

    series: [{ 
     name: 'Exercise', 
     borderColor: Highcharts.getOptions().colors[1], 
     data: [{ 
      color: Highcharts.getOptions().colors[1], 
      radius: '75%', 
      innerRadius: '75%', 
      y: 65 
     }] 
    }] 
}, 

/** 
* In the chart load callback, add icons on top of the circular shapes 
*/ 
function callback() { 

    // Exercise icon 
    this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8, 'M', 8, -8, 'L', 16, 0, 8, 8]) 
     .attr({ 
      'stroke': '#303030', 
      'stroke-linecap': 'round', 
      'stroke-linejoin': 'round', 
      'stroke-width': 2, 
      'zIndex': 10 
     }) 
     .translate(190, 61) 
     .add(this.series[2].group); 

}); 

var chart = $('#container').highcharts(), 
     point = chart.series[0].points[0]; 
point.onMouseOver(); // Show the hover marker 
chart.tooltip.refresh(point); // Show the tooltip 
chart.tooltip.hide = function() {}; 
}); 

Answer 1

您在控制台中出现错误。您应该修复负责渲染箭头的代码。

this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8, 'M', 8, -8, 'L', 16, 0, 8, 8]) 
     .attr({ 
      'stroke': '#303030', 
      'stroke-linecap': 'round', 
      'stroke-linejoin': 'round', 
      'stroke-width': 2, 
      'zIndex': 10 
     }) 
     .translate(190, 61) 
     .add(this.series[0].group); //it tried add path to a non-existing 3rd series 

例如：https://jsfiddle.net/v21zefzs/1/