首页 文章

Highcharts - 忽略Pie Percentage中的系列

提问于
浏览
0

我有一个系列,我希望在饼图的百分比计算中忽略但在单击图例项时仍然显示/隐藏 . 该系列代表总数,应始终为100% . 如果我将系列的visible设置为false,则它最初隐藏在图表中,并且图例项目显示为灰色 . 但是,单击图例项会显示具有计算百分比的系列 . 似乎我需要另一个系列背后我想要计算和显示的值,这总是100%,任何想法?

谢谢!

Chart Config

vm.installationResultsConfig = {
      options: {
        exporting: {
          type: 'application/pdf',
          filename: 'installation-results'
        },
        credits: {
          enabled: false
        },
        navigation: {
          buttonOptions: {
            enabled: false
          }
        },
        chart: {
          backgroundColor: '#F9F9F9',
          borderColor: '#eee',
          plotBackgroundColor: null,
          plotBorderWidth: 0,
          plotShadow: false,
          height: 440
        },
        title: {
          text: 'Installation Results',
          align: 'center',
          verticalAlign: 'top'
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
          pie: {
            dataLabels: {
              enabled: false
            },
            startAngle: 0,
            endAngle: 360,
            center: ['50%', '55%'],
            showInLegend: true
          }
        },
        legend: {
          align: 'left',
          verticalAlign: 'middle',
          layout: 'vertical',
          x: -8,
          y: 30,
          labelFormatter: function () {
            if(this.name === 'All Vehicles') {
              this.percentage = 100;
            }
            return '<span>' + this.name + '</span>
' + '<span>' + this.dataLabels.count + '</span>
' + '<span>' + $filter('number')(this.percentage) + '%</span>'; }, useHTML: true, itemMarginTop: 5, itemMarginBottom: 5 } }, series: [{ type: 'pie', name: 'Installation Results', innerSize: '70%', data: [ { name: 'All Vehicles', // should be ignored and alway render as 100% y: chartData.allVehicles, color: '#999999', dataLabels: { count: $filter('number')(chartData.allVehicles) } }, { name: 'Successful', y: chartData.successful, color: '#50CF63', dataLabels: { count: $filter('number')(chartData.successful) } }, { name: 'Failed', y: chartData.failed, color: '#F22F1D', dataLabels: { count: $filter('number')(chartData.failed) } }, { name: 'Not Attempted', y: chartData.notAttempted, color: '#296499', dataLabels: { count: $filter('number')(chartData.notAttempted) } } ] }] };

1 回答

  • 0

    percentage 属性将影响系列中的所有饼图切片 . 在这种情况下,您可以创建自定义百分比属性,该属性将仅基于非 'All Vehicles' slice的可见切片计算 . 看看下面的例子 . 另外,我认为 labelFormatter 函数不适合进行计算,但我只想告诉你这个想法 .

    例:
    http://jsfiddle.net/g1hw761h/

相关问题