Highcharts。 mouseOver上圆环图内的动态标签

时间:2017-10-03 19:52:28

标签: javascript jquery highcharts donut-chart

所以这就是我想要完成的事情: Example

我需要的是:

  • 将鼠标图上的标签更改为鼠标悬停

  • 颜色取决于数据

  • 样式标签看起来像图片

我实际上设法将鼠标移开但我无法根据数据更改颜色并将其置于中间

这是一个小提琴:https://jsfiddle.net/9cjxb97a/1/

这是我到目前为止编写的代码:

    Highcharts.chart('container', {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
  },
  title: {
    text: ''
  },
  exporting: {
    enabled: false
  },
  tooltip: {
    enabled: false
  },
  colors: ['red', 'blue', 'green'],
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: false,
        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
        style: {
          color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
        }
      }
    },
    series: {
      point: {
        events: {
          mouseOver: function() {
            var chart = this.series.chart;
            if (!chart.lbl) {
              chart.lbl = chart.renderer.label('')
                .attr({
                  padding: 10,
                })
                .css({
                  color: 'red',
                })
                .add();
            }
            chart.lbl
              .show()
              .attr({
                text: this.y + '%'
              });
          }
        }
      },

    },
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
      name: 'Microsoft Internet Explorer',
      y: 56.33
    }, {
      name: 'Chrome',
      y: 24.03,

    }, {
      name: 'Firefox',
      y: 10.38
    }, {
      name: 'Safari',
      y: 4.77
    }, {
      name: 'Opera',
      y: 0.91
    }, {
      name: 'Proprietary or Undetectable',
      y: 0.2
    }],
    innerSize: '80%'
  }],

});

由于

1 个答案:

答案 0 :(得分:0)

这是您的代码,用于在圆之间显示值。

protected function schedule(Schedule $schedule)
{
    $schedule->job(new renewingInvoiceLinks, 'renewingInvoiceLinks')->daily();
}