如何为每个系列的 highcharts 活动量表添加标签

Question

我需要为实心仪表高图表添加自定义标签，如小提琴所示 - http://jsfiddle.net/195gmh5k/1/

$(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) {
            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: [],
        plotLines: [{
                    color: 'red', // Color value
                    value: 0, // Value of where the line will appear
                    width: 2, // Width of the line,
                    zIndex: 10
                }, {
                    color: 'red',
                    value: 33.3,
                    width: 2,
                    zIndex: 10
                }, {
                    color: 'red',
                    value: 66.6,
                    width: 2,
                    zIndex: 10
                }]
    },

    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.label('hello1', 180, 35, 'rect', 0, 0, true, true, '')
        .add(this.series[2].group);

    // Exercise icon
    this.renderer.label('hello2', 180, 65, 'rect', 0, 0, true, true, '')
        .add(this.series[2].group);

    // Stand icon
    this.renderer.label('hello3', 180, 100, 'rect', 0, 0, true, true, '')

        .add(this.series[2].group);
});


});

我正在使用 Renderer.label api 来指定标签的位置。

目前我尝试在反复试验的基础上定位 x 和 y 坐标。

指定标签坐标的更有效（基本方法）方法是什么。 我需要指定将所有标签沿不同规格的垂直绘图线对齐。

Answer 1

我找到了一个更好的解决方案和最干净的：

 Highcharts.chart('container', {

    chart: {
        type: 'solidgauge',
        height: '50%',
        events: {
            render: renderIcons,
            redraw: function () {
                for (var i = 0; i < this.series.length; i++){
                    if (!this.series[i].icon) {
                        this.series[i].icon = this.renderer.label(this.series[i].yData[0]+'%', this.series[i].data[0].x, this.series[i].data[0].y, 'rect')
                        .attr({
                          zIndex: 10,
                          fontColor:'#FFFF'
                        })
                        .add(this.series[2].group);
                        this.series[i].icon.translate(
                            this.chartWidth / 2 - 5,
                            this.plotHeight / 2 - this.series[i].points[0].shapeArgs.innerR -
                                (this.series[i].points[0].shapeArgs.r - this.series[i].points[0].shapeArgs.innerR) / 2
                        );
                    }
                }
                
            }
        },
        
    },
    legend: {
        enabled: true
      },

    title: {
        text: 'My chart',
        style: {
            fontSize: '24px'
        }
    },

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

    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: {
            dataLabels: {
                enabled: false
            },
            linecap: 'round',
            stickyTracking: false,
            rounded: true,
            showInLegend: true,
            //colors: ['#F62366', '#9DFF02', '#0CCDD6'],
        }
    },

    series: [{
        name: 'Move',
        colorByPoint: true,
        marker: {
            fillColor: '#7cb5ec',
          },
        data: [{
            color: '#7cb5ec',
            radius: '112%',
            innerRadius: '88%',
            y: 80
        }],
    }, {
        name: 'Exercise',
       
        marker: {
            fillColor: '#f7a35c',
          },
        data: [{
            color: '#f7a35c',
            radius: '87%',
            innerRadius: '63%',
            y: 65
        }],
    }, {
        name: 'Stand',
        marker: {
            fillColor: '#90ee7e'
          },
        data: [{
            color: '#90ee7e',
            radius: '62%',
            innerRadius: '38%',
            y: 50
        }],
    }],
    
});

现在，renderIcons 函数可以将标签渲染为图标：

function renderIcons() {

    for (var i = 0; i < this.series.length; i++){
        if (!this.series[i].icon) {
            this.series[i].icon = this.renderer.label(this.series[i].yData[0]+'%', this.series[i].data[0].x, this.series[i].data[0].y, 'rect')
            .attr({
              zIndex: 10,
              fontColor:'#FFFF'
            })
            .add(this.series[2].group);
            this.series[i].icon.translate(
                this.chartWidth / 2 - 5,
                this.plotHeight / 2 - this.series[i].points[0].shapeArgs.innerR -
                    (this.series[i].points[0].shapeArgs.r - this.series[i].points[0].shapeArgs.innerR) / 2
            );
        }
    }
}

此功能用于添加带有颜色系列的图例：

Highcharts.Legend.prototype.colorizeItem = function(item, visible) {
    item.legendGroup[visible ? 'removeClass' : 'addClass']('highcharts-legend-item-hidden');
    if (!this.chart.styledMode) {
      var legend = this,
        options = legend.options,
        legendItem = item.legendItem,
        legendLine = item.legendLine,
        legendSymbol = item.legendSymbol,
        hiddenColor = legend.itemHiddenStyle.color,
        textColor = visible ?
        options.itemStyle.color :
        hiddenColor,
        symbolColor = visible ?
        (item.color || hiddenColor) :
        hiddenColor,
        markerOptions = item.options && item.options.marker,
        symbolAttr = {
          fill: symbolColor
        };
      if (legendItem) {
        legendItem.css({
          fill: textColor,
          color: textColor // #1553, oldIE
        });
      }
      if (legendLine) {
        legendLine.attr({
          stroke: symbolColor
        });
      }
      if (legendSymbol) {
        // Apply marker options
        if (markerOptions) { // #585
  
          symbolAttr = item.pointAttribs();
          if (!visible) {
            // #6769
            symbolAttr.stroke = symbolAttr.fill = hiddenColor;
          }
        }
        legendSymbol.attr(symbolAttr);
      }
    }
    Highcharts.fireEvent(this, 'afterColorizeItem', {
      item: item,
      visible: visible
    });
  } 

问候。