2016-11-22 3 views
1

Я работаю над диаграммой столбцов, используя Highchart. Моя диаграмма работает нормально. Я просто хочу удалить маркер в всплывающей подсказке. Из изображения вы можете видеть, что пуля появляется перед суммой. Как я могу удалить это? Пожалуйста, поделитесь со мной, если у кого есть идеи.Как удалить пулю из всплывающей подсказки при использовании 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

Вы можете извлечь пулю, изменив эстетичный формат подсказка/подсказки. 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

Спасибо за ваши усилия. Но когда вы обновили всплывающую подсказку, разделение запятой удалилось. Я использую индийское разделение запятой на всплывающей подсказке. Вы можете увидеть в моей подсказке, Amount (Rs.): 10,70,452. Поэтому мне нужно, чтобы это было в подсказке. –

+0

Вы можете использовать Highcharts.numberFormat (this.y, your params) в подсказке. Смотрите скрипку здесь http://jsfiddle.net/Nishith/f63seesg/9/ –

+0

Хорошо, это занимает формат США 123 456,78. Но я хочу индийский формат. Что-то вроде 12,34,567 –

Смежные вопросы