如何在Highchart.js中顯示多個標籤？

我有基本的瀑布圖（HighChart.js）basic Waterfall chart image example 如何在Highchart.js中顯示多個標籤？

如何在每列上顯示兩個標籤？此外，第一個標籤必須位於列的頂部，另一個標籤必須位於列的底部。所以它應該完全像在形象上。

現在我有兩個想法：

第一標籤被第一圖表上呈現時，第二值將在附加的隱藏圖表（鏈接到例如：[http://jsfiddle.net/gk14kh3q/1/][3]）呈現

$(function() { 
    $('#container').highcharts({ 
    chart: { 
     type: 'waterfall' 
    }, 

    title: { 
     text: 'Highcharts Waterfall' 
    }, 

    xAxis: { 
     type: 'category' 
    }, 

    yAxis: { 
     title: { 
      text: 'USD' 
     } 
    }, 

    legend: { 
     enabled: false 
    }, 


    series: [{ 
     dataLabels: { 
      enabled: true, 
      // here need align label 
     } 
    }, { 
     dataLabels: { 
      enabled: true, 
      // here need align label 
     } 
    }] 
    }); 
});

通過使用格式化函數和useHTML屬性將兩個標籤組合在一起。並在此之後通過使用css或外部js設置位置標籤

可能是一些其他的做法存在？我會很高興的幫助。即使討論也可以是有用的。謝謝！

P.S.我如何插入圖標來提供圖像上的圖表？

來源

2016-09-15 Denis Ivko

您可以使用chart.renderer.label爲您的列點添加新的dataLabels。您還可以使用chart.renderer.image添加箭頭圖表：

var addLabels = function(chart) { 
    $('.custom').remove(); 
    var series = chart.series[0], 
     url; 
    Highcharts.each(series.data, function(p, i) { 
     if (i) { 
     chart.renderer.label(p.secondLabel, p.plotX + chart.plotLeft, p.yBottom + chart.plotTop).attr({ 
      'text-anchor': 'middle' 
     }).addClass('custom').add(); 
     if (p.y > 0) { 
      url = 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Arrow_up.svg/1000px-Arrow_up.svg.png'; 
     } else { 
      url = 'https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png' 
     } 
     chart.renderer.image(url, p.plotX + chart.plotLeft, chart.plotTop + chart.plotHeight - 15, 8, 13).addClass('custom').add() 
     } 
    }); 
};

在這裏你可以找到一個例子是如何工作的： http://jsfiddle.net/zc2fb8vt/

來源

2016-09-16 10:32:30

謝謝！ Highcharts有許多定位元素的定製選項，用於添加一些標籤。在我看來，快速進入這個圖書館非常困難 –

如何在Highchart.js中顯示多個標籤？

回答

相關問題