Highchart Activity Gauge zeigt immer Text in der Mitte

Question

Ich möchte Highchart Aktivitätsanzeige als eine Art Kreisanimation um eine Zahl/Zahl in Textform verwenden. Das Standardverhalten ist, dass der Text in der Mitte des Diagramms nur dann angezeigt wird, wenn sich der Benutzer über der Reihe befand.

Es gibt eine bestehende Lösung durch Mustapha hier: 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() {}; 
}); 

Aber das Problem ist, wenn ich 2 aus der 3 default Serie zu entfernen (so dass nur 1), diese Lösung nicht mehr funktioniert. Das ist meine Geige: 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

Sie haben den Fehler in der Konsole. Sie sollten den Code korrigieren, der für das Rendern von Pfeilen verantwortlich ist.

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 

Beispiel: https://jsfiddle.net/v21zefzs/1/