2016-05-25 4 views
1

Я использую штатную колонку highchart. Я получаю мало значения в столбце и всплывающей подсказке. Теперь я хочу показать это значение в индийском формате с помощью разделителя запятой. Предположим, что у меня есть значение, подобное 123456789. Так что я хочу показать это значение в формате 12,34,56,789. Как я могу это сделать? Пожалуйста, поделитесь со мной, если у кого-то есть идея.Как добавить запятую в штабелированном столбце highchart в индийском формате?

Я пробовал этот ниже код.

Highcharts.setOptions({ 
     lang: { 
      thousandsSep: ',' 
     } 
    }); 

Но оно дает формат 123,456,789, я хочу что-то вроде 12,34,56,789. Индийский формат.

Мои коды ниже:

function draw_charts(amount, interest , year) 
    { 
     /*Highcharts.setOptions({ 
      lang: { 
       thousandsSep: ',' 
      } 
     });*/ 
     $('#chart_area').highcharts({ 
     chart: { 
      type: 'column', 
      backgroundColor: 'transparent' 
     }, 
     title: { 
      text: 'Year wise break-up' 
     }, 
     xAxis: { 
      categories: year, 
      title: { 
       text: 'Year' 
      } 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Amount' 
      }, 
      stackLabels: { 
       enabled: true, 
       style: { 
        fontWeight: 'bold', 
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
       } 
      } 
     }, 
     legend: { 
      align: 'right', 
      x: -30, 
      verticalAlign: 'top', 
      y: -5, 
      floating: true, 
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', 
      borderColor: '#CCC', 
      borderWidth: 1, 
      shadow: false 
     }, 
     tooltip: { 
      headerFormat: '<b>{point.x}</b><br/>', 
      pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}' 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'normal', 
       dataLabels: { 
        enabled: true, 
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
        style: { 
         textShadow: '0 0 3px black' 
        } 
       } 
      } 
     }, 
     series: [{ 
      name: 'Interest', 
      data: interest, color: '#7fb801' 
     },{ 
      name: 'Principal', 
      data: amount, color: '#4fc1e9' 
     }], 
     exporting: { enabled: false }, 
     credits: { enabled: false }, 

    }); 

    } 

ответ

4

Вы можете немного изменить функцию numberFormat, переходя от линий (from source):

thousands = strinteger.length > 3 ? strinteger.length % 3 : 0; 
// ... 
ret += strinteger.substr(thousands).replace(/(\d{3})(?=\d)/g, '$1' + thousandsSep); 

Для этих линий:

thousands = strinteger.length > 3 ? (strinteger.length - 1) % 2 : 0; 
// ... 
ret += strinteger.substr(thousands).replace(/(\d{2})(?=\d{3})/g, '$1' + thousandsSep); 

Завершение с помощью этой функции:

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; 
}; 

Я префикс некоторых вызовов функций с помощью Highcharts, чтобы он работал без специального js-файла.

См. this JSFiddle demonstration из этого в использовании.

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