Как установить фон всплывающей подсказки в качестве цвета точки для диаграммы разделения в Highcharts?

Question

Я собираюсь установить цвет фона всплывающей подсказки, когда в Highcharts установлено значение tooltip.split.

// Create the chart
Highcharts.chart('container', {

    chart: {
        type: 'spline',
    },

    title: {
        text: 'Mountain house indoor temperatures'
    },

    subtitle: {
        text: 'Split tooltips in Highcharts makes it easier to read overlapping line series'
    },

    tooltip: {
        split: true,
    },

    xAxis: {
        crosshair: {
            enabled: true
        }
    },

    yAxis: {
        title: {
            text: 'Temperatur'
        }
    },

    plotOptions: {
        series: {
          lineWidth: 1.5,
          marker: {
            radius: 2
          },
          events: {
            afterAnimate() {
            	console.log("secondthis", this);
              this.tooltipOptions.backgroundColor = this.color
            }
          }
        }
    },

    data: {
        columns: [
            ["Time", 1451616120000, 1451865660000, 1451952060000, 1452038400000, 1452124800000, 1452211200000, 1452297600000, 1452384000000, 1452470400000, 1452556800000, 1452643200000, 1452729600000, 1452816000000, 1452902400000, 1452988800000, 1453075200000, 1453161600000, 1453248000000, 1453334400000, 1453420800000, 1453507200000, 1453593600000, 1453680000000, 1453766400000, 1453852800000, 1453939200000, 1454025600000],
            ["Kitchen", 5, 4, 5, 9, 6, 15, 19, 14, 6, 5, 6, 6, 15, 18, 15, 6, 6, 6, 6, 6, 6, 6, 16, 10, 6, 6, 6],
            ["Living room", 9, 10, 16, 13, 6, 20, 24, 16, 7, 7, 6, 6, 20, 23, 18, 9, 7, 6, 6, 7, 6, 21, 20, 16, 6, 6, 6],
            ["Hall", 7, 7, 13, 12, 5, 17, 22, 14, 4, 5, 5, 6, 18, 21, 17, 9, 5, 6, 5, 6, 6, 18, 20, 14, 5, 5, 5],
            ["Bathroom", 7, 7, 13, 12, 5, 17, 22, 14, 4, 5, 5, 6, 18, 21, 17, 9, 5, 6, 5, 6, 6, 18, 20, 14, 5, 5, 5],
            ["Bedroom 1", 6, 19, 19, 10, 5, 15, 21, 14, 6, 6, 5, 5, 17, 21, 16, 6, 5, 5, 5, 5, 5, 17, 18, 13, 5, 5, 5],
            ["Bedroom 2", 7, 19, 19, 9, 5, 11, 19, 15, 6, 5, 6, 6, 16, 19, 17, 8, 9, 6, 5, 6, 5, 17, 19, 14, 6, 6, 6],
            ["Shed", 6, 6, 5, 5, 6, 6, 6, 5, 5, 6, 6, 5, 6, 6, 6, 6, 6, 6, null, null, 6, 6, 6, 6, 6, 6, 6]
        ]
    }

});

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>

<div id="container"></div>

Я пытался установить события, но они не работают.Как я могу это сделать?

 tooltip: {
   split: true,
 },

Answer 1

Этого можно добиться, обернув метод Highcharts.Tooltip.prototype.renderSplit и добавив туда следующие строки кода:

pointColor = H.charts[0].options.colors[pick(
  point.colorIndex,
  series.colorIndex,
  'none'
)];
pointColor = pointColor ? pointColor : '#efefef';
pointColor = H.Color(pointColor);
pointColor.rgba[3] = 0.8; // opacity

А затем используйте pointColor, чтобы установить свойство заливки для конкретного элемента всплывающей подсказки:

if (!chart.styledMode) {
  attribs.fill = pointColor.get('rgba');
  attribs.stroke = (
    options.borderColor ||
    point.color ||
    series.color ||
    '#333333'
  );
  attribs['stroke-width'] = options.borderWidth;
}

Весь код упаковки:

(function(H) {
  H.Tooltip.prototype.renderSplit = function(labels, points) {
    var tooltip = this,
      pick = H.pick,
      boxes = [],
      chart = this.chart,
      ren = chart.renderer,
      rightAligned = true,
      options = this.options,
      headerHeight = 0,
      headerTop,
      tooltipLabel = this.getLabel(),
      distributionBoxTop = chart.plotTop;

    // Graceful degradation for legacy formatters
    if (H.isString(labels)) {
      labels = [false, labels];
    }
    // Create the individual labels for header and points, ignore footer
    labels.slice(0, points.length + 1).forEach(function(str, i) {
      if (str !== false && str !== '') {
        var point = points[i - 1] || {
            // Item 0 is the header. Instead of this, we could also
            // use the crosshair label
            isHeader: true,
            plotX: points[0].plotX,
            plotY: chart.plotHeight
          },
          owner = point.series || tooltip,
          tt = owner.tt,
          series = point.series || {},
          colorClass = 'highcharts-color-' + pick(
            point.colorIndex,
            series.colorIndex,
            'none'
          ),
          target,
          x,
          bBox,
          boxWidth,
          pointColor,
          attribs;

        // Store the tooltip referance on the series
        if (!tt) {

          attribs = {
            padding: options.padding,
            r: options.borderRadius
          };

          // CUSTOM COLORS //
          pointColor = H.charts[0].options.colors[pick(
            point.colorIndex,
            series.colorIndex,
            'none'
          )];
          pointColor = pointColor ? pointColor : '#efefef';
          pointColor = H.Color(pointColor);
          pointColor.rgba[3] = 0.8;
          // CUSTOM COLORS //

          if (!chart.styledMode) {
            attribs.fill = pointColor.get('rgba');
            attribs.stroke = (
              options.borderColor ||
              point.color ||
              series.color ||
              '#333333'
            );
            attribs['stroke-width'] = options.borderWidth;
          }

          owner.tt = tt = ren
            .label(
              null,
              null,
              null,
              (
                point.isHeader ? options.headerShape :
                options.shape
              ) || 'callout',
              null,
              null,
              options.useHTML
            )
            .addClass('highcharts-tooltip-box ' + colorClass)
            .attr(attribs)
            .add(tooltipLabel);
        }

        tt.isActive = true;
        tt.attr({
          text: str
        });
        if (!chart.styledMode) {
          tt.css(options.style)
            .shadow(options.shadow);
        }

        // Get X position now, so we can move all to the other side in
        // case of overflow
        bBox = tt.getBBox();
        boxWidth = bBox.width + tt.strokeWidth();
        if (point.isHeader) {
          headerHeight = bBox.height;
          if (chart.xAxis[0].opposite) {
            headerTop = true;
            distributionBoxTop -= headerHeight;
          }
          x = Math.max(
            0, // No left overflow
            Math.min(
              point.plotX + chart.plotLeft - boxWidth / 2,
              // No right overflow (#5794)
              chart.chartWidth +
              (
                // Scrollable plot area
                chart.scrollablePixels ?
                chart.scrollablePixels - chart.marginRight :
                0
              ) -
              boxWidth
            )
          );
        } else {
          x = point.plotX + chart.plotLeft -
            pick(options.distance, 16) - boxWidth;
        }


        // If overflow left, we don't use this x in the next loop
        if (x < 0) {
          rightAligned = false;
        }

        // Prepare for distribution
        target = (point.series && point.series.yAxis &&
          point.series.yAxis.pos) + (point.plotY || 0);
        target -= distributionBoxTop;

        if (point.isHeader) {
          target = headerTop ?
            -headerHeight :
            chart.plotHeight + headerHeight;
        }
        boxes.push({
          target: target,
          rank: point.isHeader ? 1 : 0,
          size: owner.tt.getBBox().height + 1,
          point: point,
          x: x,
          tt: tt
        });
      }
    });

    // Clean previous run (for missing points)
    this.cleanSplit();

    if (options.positioner) {
      boxes.forEach(function(box) {
        var boxPosition = options.positioner.call(
          tooltip,
          box.tt.getBBox().width,
          box.size,
          box.point
        );

        box.x = boxPosition.x;
        box.align = 0; // 0-align to the top, 1-align to the bottom
        box.target = boxPosition.y;
        box.rank = pick(boxPosition.rank, box.rank);
      });
    }

    // Distribute and put in place
    H.distribute(boxes, chart.plotHeight + headerHeight);
    boxes.forEach(function(box) {
      var point = box.point,
        series = point.series;

      // Put the label in place
      box.tt.attr({
        visibility: box.pos === undefined ? 'hidden' : 'inherit',
        x: (rightAligned || point.isHeader || options.positioner ?
          box.x :
          point.plotX + chart.plotLeft + tooltip.distance),
        y: box.pos + distributionBoxTop,
        anchorX: point.isHeader ?
          point.plotX + chart.plotLeft : point.plotX + series.xAxis.pos,
        anchorY: point.isHeader ?
          chart.plotTop + chart.plotHeight / 2 : point.plotY + series.yAxis.pos
      });
    });
  }
})(Highcharts);

Демонстрация:

• https://jsfiddle.net/BlackLabel/rdnoq0fs/