2016-05-25 5 views
1

Ich verwende stacked column highchart. Ich bekomme wenig Wert in Spalte und Tooltip. Jetzt möchte ich diesen Wert im indischen Format mit Kommatrennzeichen anzeigen. Angenommen, ich habe einen Wert wie 123456789.So möchte ich diesen Wert im Format 12,34,56,789 anzeigen. Wie kann ich das machen? Bitte teilen Sie mit mir, wenn irgendein Körper eine Idee hat.Wie fügt man Komma in Stacked Column Highchart im indischen Format hinzu?

Ich versuchte dies unter dem Code.

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

aber es gibt 123.456.789 Format, möchte ich so etwas wie 12,34,56,789. Das indische Format.

Meine Codes sind unten:

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

    }); 

    } 

Antwort

4

Sie leicht die numberFormat Funktion ändern können, aus den Leitungen zu wechseln (from source):

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

Zu diesen Zeilen:

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

Beenden mit dieser Funktion:

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

ich einige Funktion voran habe Anrufe mit Highcharts, um es ohne eine benutzerdefinierte js-Datei zu arbeiten.

Siehe this JSFiddle demonstration davon in Verwendung.

Verwandte Themen