2016-01-24 3 views
0

У меня есть комбо highchart, но это не отображается правильно, это код, который я использую:Highchart Combochart Вынесено Неправильный

<script type="text/javascript"> 
$(document).ready(function() { 

    SCurvechart = new Highcharts.Chart({ 
     chart: 
      { 
       events: { 
        load: function() { 
         var label = this.renderer.label('Details for Company B') 
         .css({ 
          width: '450px', 
          color: '#666666', 
          fontSize: '16px' 
         }) 
         .attr({ 
          'padding': 10 
         }) 
         .add(); 

         label.align(Highcharts.extend(label.getBBox(), { 
          align: 'left', 
          x: 50, 
          verticalAlign: 'top', 
          y: 5 
         }), null, 'spacingBox'); 

        } 
       }, 
       borderColor: '#BBBBBB', 
       borderWidth: 1, 
       plotShadow: true, 
       renderTo: 'SCurvechart_container', 
       zoomType: 'xy' 
      }, 
     exporting: { 
      enabled: false 
     }, 
     credits: { 
      enabled: false 
     }, 
     legend: 
      { 
       align: 'left', 
       backgroundColor: '#FFFFFF', 
       floating: true, 
       layout: 'vertical', 
       verticalAlign: 'top', 
       x: 120, 
       y: 100, 
       itemStyle: { 
        color: '#666666', 
        fontWeight: 'bold', 
        fontSize: '10px', 
        font: 'Trebuchet MS, Verdana, sans-serif' 
       } 
      }, 
     title: 
      { 
       text: '' 
        }, 
       tooltip: 
        { 
         shared: true 
        }, 
       plotOptions: { 
        series: { 
         allowPointSelect: true, 
         cursor: 'pointer', 
         dataLabels: { 
          enabled: false 
         }, 
         events: { 
          //click: ChartClick 
         }, 
         showInLegend: false, 
         stacking: 'normal' 
        } 
       }, 
       xAxis: 
        { 
         labels: 
          { 
           formatter: function() { return this.value; }, style: { color: '#4572A7' }, 
           style: {font: '9px Trebuchet MS, Verdana, sans-serif'} 
          }, 
         categories: ['25/07/14','29/08/14','26/09/14','31/10/14','28/11/14','26/12/14','30/01/15','27/02/15','27/03/15','24/04/15','29/05/15','26/06/15','31/07/15','28/08/15','25/09/15','30/10/15','27/11/15','25/12/15','29/01/16','26/02/16','25/03/16','29/04/16','27/05/16','24/06/16','29/07/16','26/08/16','30/09/16','28/10/16','25/11/16','30/12/16','27/01/17','24/02/17','31/03/17','28/04/17','26/05/17','30/06/17'] 
         }, 
       yAxis: [ 
        { 
         min: 0, 
         labels: 
          { 
           formatter: function() { return this.value; }, style: { color: '#4572A7' }, 
           style: {font: '9px Trebuchet MS, Verdana, sans-serif'} 
          }, 
         opposite: true, 
         title: 
          { 
           style: 
            { 
             font: '10px Trebuchet MS, Verdana, sans-serif' 
            }, 
           text: 'Overall Activities' 
          } 
        }, 
        { 
         labels: 
          { 
           formatter: function() { return this.value; }, style: { color: '#89A54E' }, 
           style: {font: '9px Trebuchet MS, Verdana, sans-serif'} 
          }, 
         title: 
          { 
           style: 
            { 
             font: '10px Trebuchet MS, Verdana, sans-serif' 
            }, 
           text: 'Weekly Activities' 
          } 
        }], 
       series: [ 
       { data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,3,7,3,5,4,1,2,0,0,0,0,0,1,0,1,0,4,0,0,0], name: 'Target', type: 'column', yAxis: 1, color: '#6699CC' }, 
       { data: [], name: 'Actual', type: 'column', yAxis: 1, color: '#FAC090' }, 
       { data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,,,,,,,,,,,,,,,,,], name: 'Actual Acc', type: 'spline', color: '#FF0000' }, 
       { data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,5,12,15,20,24,25,27,27,27,27,27,27,28,28,29,29,33,,,], name: 'Target Acc', type: 'spline', color: '#376092' } 
       ] 
       }); 

     }); 

Если вы видите сравнить график против одного созданного в Excel вы можете увидеть проблему, https://www.dropbox.com/s/8lrk0vtgwitbdb4/Chart-Screenshot-in-Excel.JPG?dl=0

с highchart оказанной графике: https://www.dropbox.com/s/c1ga0x3vxa8sbol/Highchart-screenshot.JPG?dl=0

Как видите, линейные диаграммы ошибочны, они должны быть близки друг к другу.

Любая помощь приветствуется.

ответ

3

Проблема в том, что код, устанавливающий высокий уровень, позволил укладке, установив атрибут укладки на «нормальный».

{..., plotOptions: { series: {..., showInLegend: false, stacking: 'normal'}}, ...} 

Вы можете отключить штабелирование, удалив атрибут укладки. Например ...

{..., plotOptions: { series: {..., showInLegend: false}}, ...} 

Или вы можете отключить укладку, установив атрибут укладки на нуль. Например, ...

{..., plotOptions: { series: {..., showInLegend: false, stacking: null}}, ...} 
Смежные вопросы