【问题标题】:HighCharts: Display total value below the legend titleHighCharts:在图例标题下方显示总值
【发布时间】:2017-03-30 15:14:05
【问题描述】:

我能够在 angular2-highcharts 中显示图例和图例标题。 我计划在图例标题下方显示总计数(此处位于城市下方),但无法找出方法。 我也不确定为什么 % 与图例值中的值一起显示。

我的标签格式化程序是:

  labelFormatter: function () {
      return '<div class="legend-label-md row" style=" border-bottom:1px solid black; margin-bottom: 5px"><span class="col-md-10">' + this.name +
             '</span><span class="col-md-2" >' + this.value +
              '%</span></div> ';
       }

https://plnkr.co/edit/yzXLz7AIDoWa1Pzxxl4k?p=preview

【问题讨论】:

  • % 由于此处的 % 字符而显示:'%&lt;/span&gt;&lt;/div&gt; ';
  • 谢谢。我忽略了它。关于获取总值并显示它的任何想法。
  • 好久没和HS合作了,不熟悉这种启动方式。如果你以某种方式将它分配给一个变量,你就可以访问它的所有对象。像这样:jsfiddle.net/trn_/ck8xq14w

标签: highcharts angular2-highcharts


【解决方案1】:

每个饼系列点都有该系列的总数,因此您可以更新图表加载事件的图例以包括该系列的总数。

演示:https://plnkr.co/edit/6JW1KmYE1Lr4pAIWCJTm?p=preview

模板为:

template: `
    <chart  [options]="options" (load)="onLoad($event)">
    </chart>
`

class AppComponent:

    onLoad (e) {
                var chart = e.context,
                    total = chart.series[0].points[0].total;
                chart.update({
                    legend: {
                        title: {
                            text: 'City<br/><span style="font-size: 9px; color: #666; font-weight: normal">(Total: ' + total + ')</span>' 
                        }
                    }
                })
              };

【讨论】:

猜你喜欢
  • 2013-02-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-01-30
  • 2016-01-16
  • 2019-07-30
  • 2014-11-30
  • 1970-01-01
相关资源
最近更新 更多