Поворот highchart

Im имеющий следующий кодПоворот highchart

<!DOCTYPE html> 
<head> 
    <title>Shipment tracker</title> 
    <script type="text/javascript" src="file:///android_asset/jquery.min.js"></script> 
    <script type="text/javascript" src="file:///android_asset/highcharts.js"></script> 
    <script type="text/javascript" src="file:///android_asset/highcharts-3d.js"></script> 

    <script> 

    function loadShipment(){ 
     $(function() { 
       $('#container').highcharts({ 
        colors:['#F58835','#F32D2B',], 
        chart: { 
         type: 'column' 
        },options3d: { 
        enabled: true, 
        alpha: 15, 
        beta: 15, 
        depth: 50, 
        viewDistance: 25 
       },title: { 
         text: 'Shipment ' 
        }, 
        subtitle: { 
         text: '' 
        }, 
        xAxis: { 
         categories: [ 
          '2000', 
          '2001', 
          '2002', 
          '2003', 
          '2004', 
         ], 
         crosshair: true, 
         labels: { 
           useHTML: true, 
          }, 

        }, 
        yAxis: { 
         min: 0, 
         title: { 
          text: 'Shipment data' 
         }, 
         allowDecimals: false 
        }, 
        tooltip: { 
         headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
         pointFormat: '<tr><td style="padding:0">{series.name}: </td>' + 
          '<td style="padding:0"><b>{point.y:.0f}</b></td></tr>', 
         footerFormat: '</table>', 
         shared: true, 
         useHTML: true 
        }, 
        plotOptions: { 
         column: { 
          pointPadding: 0, 
          groupPadding: 0.3, 
          borderWidth: 0, 
          dataLabels: { 
          enabled: true, 
          textShadow:null, 
          // format:'{point.percentage:.0f}%' 
          format:'{point.y}' 
          },animation: { 
        duration: 15000 
       }, column: { 
     depth: 25 
     }, 
          point: { 
          events: { 
           click: function() { 
            var drilldown = this.drilldown; 
            if (drilldown) { 
              loadDrillDownData(drilldown); 
            } 
           } 
           } 
          } 
         } 
        }, 
        series: [{ 
         name: 'Delayed Shipment', 
         data: [9, 5, 9, 8, 4,], 
        }, { 
         name: 'Shipped', 
         data: [0, 1, 2, 3, 1, ], 
        }] 
       }); 

      }); 


    } 
    </script> 
</head> 
<body> 
    <div id="container" ></div> 
    <div id="sliders"> 
     <table> 
      <tr><td>Alpha Angle</td><td><input id="R0" type="range" min="0" max="45" value="15"/> <span id="R0-value" class="value"></span></td></tr> 
      <tr><td>Beta Angle</td><td><input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td></tr> 
     </table> 
    </div> 
</body> 
</html>

Я хочу диаграмму, чтобы вращать, когда пользователь перемещает sider.How я могу быть в состоянии сделать это? это возможно? Я попытался добавить код, как и в следующие

$('#R0').on('change', function() { 
     highchart.options.chart.options3d.alpha = this.value; 
     highchart.redraw(false); 
    }); 
    $('#R1').on('change', function() { 
     highchart.options.chart.options3d.beta = this.value; 
     highchart.redraw(false); 
    });

, но он не работает

источник

2016-11-10 Hara Hara Mahadevaki

Как вы меняете настройки вашего графика, нужно использовать метод обновления вместо того, чтобы использовать метод перерисовки. http://api.highcharts.com/highstock/Chart.update

так, что становится:

$('#R0').on('change', function() { 
    highchart.update({chart: {options3d: {alpha: this.value}}}); 
}); 
$('#R1').on('change', function() { 
    highchart.update({chart: {options3d: {beta: this.value}}}); 
});

источник

2016-11-10 13:22:49 pkempenaers

ответ

Смежные вопросы