2016-11-22 51 views
1

我正在使用Highchart的柱狀圖。我的圖表工作正常。我只是想刪除工具提示中顯示的子彈。從圖片中可以看到子彈出現在金額前面。我該如何刪除它?如果有人有任何想法,請與我分享。如何在使用高圖時從工具提示中刪除子彈?

enter image description here

我的代碼如下:

Jsfiddle link

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 

<div id="hist" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 



$(document).ready(function() { 

      Highcharts.setOptions({ 
     lang: { 
      thousandsSep: ',' 
     } 
    }); 
     // comma separation 
     Highcharts.numberFormat = function (number, decimals, decimalPoint, thousandsSep) { 

     number = +number || 0; 
     decimals = +decimals; 

     var lang = Highcharts.getOptions().lang, 
      origDec = (number.toString().split('.')[1] || '').length, 
      decimalComponent, 
      strinteger, 
      thousands, 
      absNumber = Math.abs(number), 
      ret; 

     if (decimals === -1) { 
      decimals = Math.min(origDec, 20); // Preserve decimals. Not huge numbers (#3793). 
     } else if (!isNumber(decimals)) { 
      decimals = 2; 
     } 

     // A string containing the positive integer component of the number 
     strinteger = String(Highcharts.pInt(absNumber.toFixed(decimals))); 

     // Leftover after grouping into thousands. Can be 0, 1 or 3. 
     thousands = strinteger.length > 3 ? (strinteger.length - 1) % 2 : 0; 

     // Language 
     decimalPoint = Highcharts.pick(decimalPoint, lang.decimalPoint); 
     thousandsSep = Highcharts.pick(thousandsSep, lang.thousandsSep); 

     // Start building the return 
     ret = number < 0 ? '-' : ''; 

     // Add the leftover after grouping into thousands. For example, in the number 42 000 000, 
     // this line adds 42. 
     ret += thousands ? strinteger.substr(0, thousands) + thousandsSep : ''; 

     // Add the remaining thousands groups, joined by the thousands separator 
     ret += strinteger.substr(thousands).replace(/(\d{2})(?=\d{3})/g, '$1' + thousandsSep); 

     // Add the decimal point and the decimal component 
     if (decimals) { 
      // Get the decimal component, and add power to avoid rounding errors with float numbers (#4573) 
      decimalComponent = Math.abs(absNumber - strinteger + Math.pow(10, -Math.max(decimals, origDec) - 1)); 
      ret += decimalPoint + decimalComponent.toFixed(decimals).slice(2); 
     } 

     return ret; 
    }; 

      $('#hist').highcharts({ 

      credits: { enabled: false }, 
      exporting: { enabled: false }, 
      chart: { 
       type: 'column', 
       backgroundColor: "transparent", 
       plotBorderColor: '#ccc', 
       plotBorderWidth: 1, 
       borderWidth: 2, 
       borderColor: '#ccc', 
       /*borderRadius: 10,*/ 
       shadow: true, 
       spacingBottom: 30, 
       spacingTop: 30, 
       spacingLeft: 30, 
       spacingRight: 30 
      }, 
      title: { 
       text: 'Title here' 
      }, 
      xAxis: { 
      title: {text: "Rate", 
        style: { 
         fontWeight: 'bold', 
         fontSize:'14px' 
        } }, 
       categories: [ 
        'ABC Percentage: 10.81%', 
        'CDE: 18.15%' 
       ], 
       labels: { 
        style: { 
         fontWeight: 'bold', 
         fontSize:'14px' 
        } 
       }, 
       crosshair: false 
      }, 
      yAxis: { 
       min: 0, 
       max: 1800000, 
       title: { 
        text: 'Amount (Rs.)' 
       }, 
       labels: { 
        formatter: function() { 
         return this.value/100000 + "L"; 
        } 
       } 
      }, 
      tooltip: { 

       headerFormat: '<b>Rate<br>{point.key}<br></b>', 
       //pointFormat: '', 
       //footerFormat: '<b>{point.key}</b>', 
       //shared: true, 
       useHTML: true, 

      }, 
      plotOptions: { 
       column: { 
        pointPadding: 0.2, 
        borderWidth: 0 
       } 
      }, 
      series: [{ 
       showInLegend: false, 
       name: '<b>Amount (Rs.)</b>', 
       data: [1070452, 1942379] 
      }] 
     }); 

}); 
+0

它是由highcharts.js默認。 – Mahi

+0

http://api.highcharts.com/highcharts/tooltip.pointFormat – Mahi

回答

0

您可以通過更改提示/提示格式的appearace取出子彈。 Tooltip format

+0

你可以在我的代碼中添加嗎?我已經添加了我的jsfiddle。 http://jsfiddle.net/f63seesg/4/ –

2

使用格式化功能按下面的代碼:

   useHTML: true, 
      formatter: function() { 
      return '<b>Rate</b><br/>'+this.point.category +'<br><b>'+this.series.name+'</b> '+ this.y ; 
       } 

your fiddle updated here

ToolTip screen-shot

+0

感謝您的努力。但是,當您更新工具提示時,逗號分隔已被刪除。我在工具提示上使用印度逗號分隔。您可以在我的工具提示中看到金額(盧比):10,70,452。所以我需要這個工具提示。 –

+0

你可以在工具提示中使用Highcharts.numberFormat(this.y,你的參數)在這裏看到提琴http://jsfiddle.net/Nishith/f63seesg/9/ –

+0

好吧,它採取美國格式123,456,78。但我想印度格式。類似於12,34,567 –

相關問題