Question

我试图在从highcharts创建的图表中使用两个样条线。我的第一个Spline显示在中心，第二个显示正确。我的输出如下所示，

我正在尝试以下代码，

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


    }           
    ]


});
});

我的例外输出是，

请帮我解决这个问题。

Answer 1

要解决此问题，只需将第一个样条数据值更改为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>

不能在Highchart中使用两个样条线

1 个答案: