2016-11-10 34 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手机应用程序背景进出口。在这里,当我说插入时,视图将遵循存在的某个预定义或自定义路径。我想要与高图 –