Kann nicht zwei Splines in Highchart verwenden

Ich versuche, zwei Spline in meinem Diagramm aus Highcharts erstellt verwenden. Mein erster Spline wird in der Mitte angezeigt und der zweite wird korrekt angezeigt. Meine Ausgabe wie folgt aussehen, Kann nicht zwei Splines in Highchart verwenden

Am versuchen, den folgenden Code,

<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] 


    }   
    ] 


}); 
});

And My Gestellte Ausgang ist,

Bitte helfen Sie mir diese Probleme zu lösen.

Quelle

2017-06-05 Nisanth

was ist Ihr erwartetes Ergebnis können Sie Bild hinzufügen –

Ya, sicher. Ich werde meine Frage mit der erwarteten Ausgabe ändern Image – Nisanth

Ich fügte mein freigestelltes Ausgabebild hinzu – Nisanth

Zum Lösen dieser Probleme ändern Sie einfach den ersten Spline-Datenwert in 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>

Quelle

2017-06-05 13:12:27 Nisanth

http://jsfiddle.net/deep3015/ghbyqnsf/ können Sie in diesem Fall Flächendiagramm verwenden –

Kann nicht zwei Splines in Highchart verwenden

Antwort

Verwandte Themen