チャートデータを補間する

Question

次のコードを使用して、ハイチャートを使用してチャートを作成します。

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

のようにアニメーションでチャートを補間したいしかし、私は同じアニメーションでチャートを読み込むことが可能な任意の方法はありますか？グラフが読み込まれているときでも同じアニメーションが必要です。高いチャートで実現可能ですか？どうすればできますか？

Answer 1

グラフの種類を行に更新できます。

chart: { 
      type: 'line', 
} 

行目に

chart: { 
      type: 'bar', 
} 

は、これはあなたが探しているものでしょうか？