ハイチャートで2つのスプラインを使用できません

ハイチャートから作成したグラフに2つのスプラインを使用しようとしています。私の最初のスプラインは中央に表示され、2番目のスプラインは正しく表示されます。以下のような私の出力を見て、ハイチャートで2つのスプラインを使用できません

は、

<script type="text/javascript"> 


var categories = []; 
$(document).ready(function() { 



    var left = [ 5, 0, 0, 0, 0, 3, 0, 0, 0, 0, 5]; 
    var right = [-5, -0, -0, -0, -0, -3, -0, -0, -0, -0, -5]; 

Highcharts.chart('container', { 
    chart: { 
     type: 'bar' 
    }, 
     tooltip: { enabled: false },  
    xAxis: [{ 
     categories: categories, 
     reversed: false, 

    }, { 
     opposite: true, 
     reversed: false, 
     categories: categories, 
     linkedTo: 0, 

    }], 
    yAxis: { 

     title: { 
      text: null 
     }, 

    }, 

    plotOptions: { 
     series: { 
      pointWidth: 2, 
      stacking: 'normal' 
     } 
    }, 

    exporting: { enabled: false }, 
    credits: {enabled: false}, 

    series: [{ 
     showInLegend: false, 

     data: right 

    }, { 
     showInLegend: false, 

     data: left 
    } 
    ,{ 
     showInLegend: false, 
     type: 'spline', 
     name:'test1', 
     marker:'disabled', 
     color:'black', 
     data: [-5,-4,-3,-3,-3,-3,-3,-3,-3,-4,-5], 
     pointPlacement: -.15 

    }, 
    { 
     showInLegend: false, 
     type: 'spline', 
     name:'test2', 
     marker:'disabled', 
     color:'black', 
     data: [5,4,3,3,3,3,3,3,3,4,5] 


    }   
    ] 


}); 
});

を次のコードをしようとしていますそして私の除外出力は、

でこの問題を解決するために私を助けてください。

出典

2017-06-05 Nisanth

あなたの予想どおりの結果は、画像を追加することができます –

確かに、確かに。私は期待された出力で私の質問を変更しますImage – Nisanth

私は除外された出力イメージを追加しました – Nisanth

この問題を解決するには、最初のスプラインデータ値をdoubleに変更します。

<!DOCTYPE html> 
<html> 
<head> 
<title>Test Graph</title> 

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 

</head> 
<body> 

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

    </body> 

    </html> 

<script type="text/javascript"> 


var categories = []; 
$(document).ready(function() { 



    var left = [ 5, 0, 0, 0, 0, 3, 0, 0, 0, 0, 5]; 
    var right = [-5, -0, -0, -0, -0, -3, -0, -0, -0, -0, -5]; 

Highcharts.chart('container', { 
    chart: { 
     type: 'bar' 
    }, 
     tooltip: { enabled: false },  
    xAxis: [{ 
     categories: categories, 
     reversed: false, 

    }, { 
     opposite: true, 
     reversed: false, 
     categories: categories, 
     linkedTo: 0, 

    }], 
    yAxis: { 

     title: { 
      text: null 
     }, 

    }, 

    plotOptions: { 
     series: { 
      pointWidth: 0, 
      stacking: 'normal' 
     } 
    }, 

    exporting: { enabled: false }, 
    credits: {enabled: false}, 

    series: [{ 
     showInLegend: false, 
     data: right 

    }, 
    { 
     showInLegend: false, 
     data: left 
    },  
    { 
     showInLegend: false, 
     type: 'spline', 
     marker:'disabled', 
     color:'black', 
     data: [-10,-8,-6,-6,-6,-6,-6,-6,-6,-8,-10] 

    }, 
    { 
     showInLegend: false, 
     type: 'spline', 
     marker:'disabled', 
     color:'black', 
     data: [5,4,3,3,3,3,3,3,3,4,5] 


    }] 

    }); 
}); 

</script>

出典

2017-06-05 13:12:27 Nisanth

http://jsfiddle.net/deep3015/ghbyqnsf/この場合はエリアチャートを使用できます –

ハイチャートで2つのスプラインを使用できません

答えて

関連する問題