首页 文章

Highcharts - 是否可以在折线图的数据标签上显示我自己的文字?

提问于
浏览
0

是否可以 display my own text on the data-labels 的折线图,仅适用于非零参赛作品 . 提供,要在数据标签中显示的文本与数据一起从xml传递 .

我需要图表,如下图所示 . 请提出一个想法 . 谢谢你的时间 .

Highcharts:

xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        if (this.point.y != 0) {
                            return this.point.y;
                        }
                    },
                    borderRadius: 5,
                    backgroundColor: 'pink',
                    borderWidth: 1,
                    borderColor: 'green',
                    y: -6
                }
            }
        },

        series: [{
            data: [0, 0,77,120,0,0,150,0,0,0,0]
        }]

}

XML:

<categories>
    <month>Jan</month>
    <month>Feb</month>
    <month>Mar</month>
    <month>Apr</month>
    <month>May</month>
    <month>Jun</month>
    <month>Jul</month>
    <month>Aug</month>
    <month>Sep</month>
    <month>Oct</month>
    <month>Nov</month>
    <month>Dec</month>
  </categories>
    <Series>
        <point>0|0</point>
        <point>0|0</point>
        <point>120|First</point>
        <point>130|0</point>
        <point>0|0</point>
        <point>0|0</point>
        <point>0|0</point>
        <point>150|Second</point>
        <point>230|Third</point>
        <point>0|0</point>
        <point>0|0</point>
        <point>0|0</point>
      </Series>

JQuery的:

$xml.find('series').each(
                        function(i,series){
                            var ser = {
                                data : [],
                            };
                        $(series).find('point').each(
                                function(i,point){
                                    ser.data.push(parseInt($(point).text().split("|")[0]);
                                });
                        options.series.push(ser);
                        });

enter image description here

1 回答

  • 4

    您可以为每个点添加额外的参数(文本),这些参数在datalabels formatter中提取 . 如果不应为0值打印datalabel,请添加检查该值的条件 .

    plotOptions: {
      series: {
        dataLabels: {
            enabled:true,
          formatter: function() {
            if(this.y > 0)
                return this.point.label;
          }
        }
      }
    },
    series: [{
      data: [{
        y: 2,
        label: 'text1'
      }, {
        y: 3,
        label: 'text2'
      }, {
        y: 0
      }, {
        y: 4,
        label: 'text3'
      }]
    }]
    

    http://jsfiddle.net/smfeo9sc/

相关问题