2016-11-10 27 views
-1

即時通訊使用以下代碼使用高圖表創建圖表。插值圖表數據

function loadGroup() { 
    $(function() { 
     $('#container').highcharts({ 
      colors: ['#F32D2B', '#F0F468', '#F58835', '#A5D17A', ], 
      chart: { 
       type: 'bar', 
       options3d: { 
        enabled: true, 
        alpha: 15, 
        beta: 15, 
        depth: 50, 
        viewDistance: 25 
       }, 
       backgroundColor: 'rgba(255, 255, 255, 0.9)', 
       renderTo: 'histogram', 

      }, 
      title: { 
       text: 'Country' 
      }, 
      xAxis: { 
       categories: ['UK', 'US', 'Brazil', 'Brunei', 'Indonesoa'], 
       labels: { 
        useHTML: true, 
        formatter: function() { 
         var name = this.value; 
         var link = '<span id="' + name + '" >' + 
          name + '</span>' 
         return link; 
        } 
       }, 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Total Values' 
       } 
      }, 
      legend: { 
       reversed: true 
      }, 
      tooltip: { 
       headerFormat: '<b>{point.x}</b><br/>', 
       pointFormat: '{series.name}: {point.percentage:.0f}% ({point.y}out of {point.stackTotal})' 
      }, 
      plotOptions: { 
       series: { 
        stacking: 'normal', 
        dataLabels: { 
         enabled: true, 
         color: 'white', 
         style: { 
          textShadow: false, 
         }, 
         format: '{point.y}' 
        }, 
        point: { 
         events: { 
          click: function() { 
           var drilldown = this.drilldown; 
           if (drilldown) { 
            loadDrillDownData(drilldown); 
           } 
          } 
         } 
        } 
       }, 
      }, 
      series: [{ 
       name: 'Pending', 
       data: [{ 
        y: 1, 
        drilldown: "Pending Shipment", 
       }, { 
        y: 2, 
       }, { 
        y: 1, 
       }, { 
        y: 1, 
       }, { 
        y: 2, 
       }, ] 
      }, { 
       name: 'Completed', 
       data: [{ 
        y: 8, 
        drilldown: "Completed Shipment", 
       }, { 
        y: 4, 
       }, { 
        y: 4, 
       }, { 
        y: 2, 
       }, { 
        y: 5, 
       }, ] 
      }, { 
       name: 'In Progress Shipment', 
       data: [{ 
        y: 2, 
        drilldown: "In Progress Shipment", 
       }, { 
        y: 2, 
       }, { 
        y: 3, 
       }, { 
        y: 2, 
       }, { 
        y: 1, 
       }, ] 
      }, { 
       name: 'Delayed Shipment', 
       data: [{ 
        y: 5, 
        drilldown: "Delayed", 
       }, { 
        y: 3, 
       }, { 
        y: 4, 
       }, { 
        y: 7, 
       }, { 
        y: 2, 
       }, ] 
      }, ] 
     }); 
    }); 
} 

我想與動畫圖表插值作爲本link

但是有沒有用,我可以用相同的動畫加載圖表任何方式?即使在圖表加載時我也需要相同的動畫。高圖表是否可行?我怎麼能做到這一點?

+0

這些是不同類型的圖表,你能指定你想要加載你的圖表的動畫嗎? – stpoa

+0

我想條形圖動畫 –

+0

加入動畫:{ 持續時間:5000 }沒有任何區別 –

回答

0

您可以將圖表類型更新爲行。

chart: { 
      type: 'bar', 
} 

排隊

chart: { 
      type: 'line', 
} 

這是你在找什麼?

+0

沒有兄弟...我想條形圖插入像折線圖 –

+0

你能解釋一下多一點。你是什​​麼意思插值。它們的設計就像它一樣。 – karman

+0

從Android手機應用程序背景進出口。在這裏,當我說插入時,視圖將遵循存在的某個預定義或自定義路徑。我想要與高圖 –