ハイチャートで同じ方向の負と正の値

Question

Helo、

ハイチャートを使用して同じ方向に負と正のシリーズを表示することは可能ですか？このよう

：

expected result

Answer 1

はい、それは可能であるが、しかし、あなたはそれをごまかすする必要があります。ラベルは負の値にしますが、絶対値（常に正の値）を使用します。

あなたのコメントとコードへのリンクの後、私はあなたのために働くと思う解決策を見つけることができました。

//tooltip function 
 
function format_tt(inp) { 
 
    index = this.point.index; 
 

 

 
    var s = '<b>' + this.x + '</b>'; 
 
    var point = this.point; 
 

 
    s += '<br/><span style="color:' + point.series.color + '">\u25CF</span>: ' + point.series.name + ': ' + tdata[index]; 
 

 
    return s; 
 
} 
 

 
//Data 
 
tdata = [20, -20]; 
 
//Rework the data to use only the positive values, but only for our graph. Wherever we need the true values, we reference tdata. 
 
data = tdata.map(function(_) { 
 
    return Math.abs(_); 
 
}); 
 
$(function() { 
 
    $('#container').highcharts({ 
 
    chart: { 
 
     type: 'column' 
 
    }, 
 
    legend: { 
 
     align: "center", 
 
     labelFormatter: function() { 
 
     var count = 0; 
 

 
     for (var i = 0; i < this.yData.length; i++) { 
 
      count += this.yData[i]; //change this to tdata[i] to get the true value; 
 
     } 
 

 
     return this.name + ' (' + count + ')'; 
 
     }, 
 
     y: 3 
 
    }, 
 
    title: { 
 
     text: 'Column chart with negative values' 
 
    }, 
 
    xAxis: { 
 
     categories: ['Receitas', 'Despesas'] 
 
    }, 
 
    credits: { 
 
     enabled: false 
 
    }, 
 
    series: [{ 
 
     name: 'Receitas e despesas', 
 
     data: data //Our data, AFTER the conversion 
 
    }], 
 
    tooltip: { 
 
     formatter: format_tt //our tooltip function. 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

jsFiddle：あなたはあなたのデータを入れたいところhttp://jsfiddle.net/zb2edyLe/3/

TDATAは今あります。元の場所ではなく、私が行ったことを説明するコメント内のコメントを確認してください。