2016-05-25 14 views
1

スタックハイチャートを使用しています。私は列とツールチップの価値がほとんど得られていません。今私はカンマ区切りでこの値をインド形式で表示したいと思います。 123456789のような値があるとします。この値を12,34,56,789形式で表示したいとします。これどうやってするの?身体があれば私に知らせてください。インライン形式の積み上げ列ハイチャートのコンマを追加するには?

私は以下のコードを試しました。

しかし、それは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

あなたは少しライン(from source)から変更、numberFormat機能を変更することができます。これらのラインに

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

私は、カスタムjsファイルなしで動作させるために、Highchartsという関数呼び出しの前にいくつかの接頭語を付けました。

this JSFiddle demonstrationを使用しています。

関連する問題