2016-11-22 7 views
1

私はハイチャートを使用して縦棒グラフに取り組んでいます。私のチャートは正常に動作しています。私はちょうどツールチップで表示されている箇条書きを削除したい。イメージからは、金額の前に弾丸が表示されます。これをどうやって削除できますか?もし誰かが何らかのアイディアを持っていれば、私と一緒に分けてくださいハイチャートを使用しているときにツールチップから箇条書きを削除するにはどうすればよいですか?

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

を参照してください。 – 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 ; 
       } 

それはhighcharts.jsからデフォルトであるyour fiddle updated here

ToolTip screen-shot

+0

あなたの努力に感謝します。しかし、ツールチップを更新すると、コンマ区切りが削除されました。私はツールチップでインドのカンマ区切りを使用しています。あなたは私のツールチップの金額(Rs。):10,70,452を見ることができます。だから私はこれをツールチップにする必要があります。 –

+0

ツールチップでHighcharts.numberFormat(this.y、あなたのparams)を使用できます。ここでfiddleを参照してください。http://jsfiddle.net/Nishith/f63seesg/9/ –

+0

Ok、米国フォーマット123,456,78を使用します。しかし、私はインドのフォーマットが欲しい。 12,34,567のようなもの –

関連する問題