【问题标题】:How do you remove the partialFill from Highcharts xrange chart如何从 Highcharts xrange 图表中删除 partialFill
【发布时间】:2018-05-30 00:49:59
【问题描述】:

想要使用 X 范围图表,其中显示在条形图中的数字和百分比已完全删除。

从文档中,我认为将 undefined 作为参数放入 partialFill 会完全删除它。但它似乎只是导致栏显示零百分比。

          partialFill: 0.25

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/x-range/

这里是 HighCharts 演示版 xrange 图表的链接。下面是代码:

Highcharts.chart('container', {
   chart: {
         type: 'xrange'
   },
   title: {
         text: 'Highcharts X-range'
   },
   xAxis: {
         type: 'datetime'
   },
   yAxis: {
          title: {
          text: ''
    },
   categories: ['Prototyping', 'Development', 'Testing'],
   reversed: true
},
series: [{
    name: 'Project 1',
    // pointPadding: 0,
    // groupPadding: 0,
    borderColor: 'gray',
    pointWidth: 20,
    data: [{
        x: Date.UTC(2014, 10, 21),
        x2: Date.UTC(2014, 11, 2),
        y: 0,
        partialFill: 0.25
    }, {
        x: Date.UTC(2014, 11, 2),
        x2: Date.UTC(2014, 11, 5),
        y: 1
    }, {
        x: Date.UTC(2014, 11, 8),
        x2: Date.UTC(2014, 11, 9),
        y: 2
    }, {
        x: Date.UTC(2014, 11, 9),
        x2: Date.UTC(2014, 11, 19),
        y: 1
    }, {
        x: Date.UTC(2014, 11, 10),
        x2: Date.UTC(2014, 11, 23),
        y: 2
    }],
    dataLabels: {
        enabled: true
    }
  }]
});

【问题讨论】:

  • 您要隐藏整个点还是只隐藏数据标签(“0%”)?
  • 我想隐藏除了彩色数据栏本身之外的任何字符。

标签: javascript highcharts


【解决方案1】:

有人叫 Daniel,在 Highcharts 论坛上回答了这个问题,我将在下面给出他的答案:

嗨,KodaroKid,

如果我理解正确,您的意思是您不想在图表上显示没有 partialFill 的点的数据标签,对吧?如果是,为了达到你期望的效果,你需要使用dataLabels.formatter函数,并检查partialFill是否定义在特定点,然后格式化并显示它的值。否则返回空字符串。请看下面的代码:

现场示例:https://jsfiddle.net/fmca01cz/

     dataLabels: {
        enabled: true,
        formatter: function() {
          var percents = this.point.partialFill
          return percents ? percents * 100 + '%' : ''
      }

API 参考:https://api.highcharts.com/highcharts/series.xrange.dataLabels.formatter

最好的问候!

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-03-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-05-10
    • 1970-01-01
    相关资源
    最近更新 更多