HIGHCHARTS - 前の列の値に基づく列の値

Question

ハイチャートを使用して問題が発生しました。 （列「C」で高さのドローをデフォルトとして列「A」に基づいている）

私は列「B」 の値に基づいて第3列「C」の高さを描画する必要 Iが作成簡単な例here

$('#container').each(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: this, 
       type: 'column', 
       margin: 0, 
       spacingTop: 0 
      }, 
      title: { 
       text: '' 
      }, 
      xAxis: { 
       categories: [ 
       'A', 
       'B', 
       'C' 
       ], title: { 
        text: null 
       }, 
       labels: { 
        style: { 
         fontSize: '9px', 
         font: '9px Arial, Helvetica' 
        }, 
        enabled: false 
       } 
      }, 
      yAxis: { 
       endOnTick: false, 
       maxPadding: 0.1, 
       gridLineColor: 'transparent', 
       minorTickLength: 0, 
       tickLength: 0, 
       min: 0, 
       title: { 
        text: '' 
       }, 
       labels: { 
        enabled: false 
       } 
      }, tooltip: { 
       pointFormat: ' <b>{point.val}</b> ', 
       shared: true 
      }, 
      legend: { 
       enabled: true 
      }, 
      plotOptions: { 
       bar: { 
        slicedOffset: 0, 
        size: '100%', 
        dataLabels: { 
         enabled: false 
        } 
       }, 
       series: { 
        slicedOffset: 0, 
        shadow: false, 
        borderWidth: 0, 
        dataLabels: { 
         enabled: true, 
         formatter: function() { 
          return this.y + '%'; 
         } 
        } 
       } 
      }, 
      legend: { 
       itemStyle: { 
        fontSize: '8px', 
        font: '8px Arial, Helvetica' 
       }, 
       enabled: false 
      }, 
      credits: { 
       enabled: false 
      }, 
      series: [{ 
       data: [ 
        { y:100, val: 2111, color: '#199ED8' }, 
        { y: Math.round(748/2111 * 100), val: 748, color: '#6CF' }, 
        { y: Math.round(433/748 * 100), val: 433, color: '#6FF' } 
       ], 
       connectNulls: true, 
       pointWidth: 58 
      }], exporting: { 
       buttons: { 
        contextButton: { 
         enabled: false 
        } 
       } 
      } 
     }); 
    }); 

Answer 1

私は、この場合にはフリオで働いている、と我々はそれを解決します。 解像度：あなたはすべて行うことができますどこの要件については、私はあなたの例のコードのポイントを参照することはできませんhttp://jsfiddle.net/JVNjs/1203/

$('#container').each(function() { 
    var publico = 2111; 
    var abordados = 748; 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: this, 
      type: 'column', 
      margin: 0, 
      spacingTop: 0 
     }, 
     title: { 
      text: '' 
     }, 
     xAxis: { 
      categories: [ 
      'Público', 
      'Abordados', 
      'Conversão' 
      ], title: { 
       text: null 
      }, 
      labels: { 
       style: { 
        fontSize: '9px', 
        font: '9px Arial, Helvetica' 
       }, 
       enabled: false 
      } 
     }, 
     yAxis: { 
      endOnTick: false, 
      maxPadding: 0.1, 
      gridLineColor: 'transparent', 
      minorTickLength: 0, 
      tickLength: 0, 
      min: 0, 
      title: { 
       text: '' 
      }, 
      labels: { 
       enabled: false 
      } 
     }, tooltip: { 
      pointFormat: ' <b>{point.y}</b> ', 
      shared: true 
     }, 
     legend: { 
      enabled: false 
     }, 
     plotOptions: { 
      bar: { 
       slicedOffset: 0, 
       size: '100%', 
       dataLabels: { 
        enabled: false 
       } 
      }, 
      series: { 
       slicedOffset: 0, 
       shadow: false, 
       borderWidth: 0, 
       dataLabels: { 
        enabled: true, 
        formatter: function() { 
         if(this.x == 'Conversão'){ 
          return Math.round(this.y/abordados * 100, 0) + '%'; 
         }else{ 
          return Math.round(this.y/publico * 100, 0) + '%'; 
         } 
        } 
       } 
      } 
     }, 
     legend: { 
      itemStyle: { 
       fontSize: '8px', 
       font: '8px Arial, Helvetica' 
      }, 
      enabled: false 
     }, 
     credits: { 
      enabled: false 
     }, 
     series: [{ 
      data: [ 
       { y:publico, color: '#199ED8' }, 
       { y:abordados, color: '#6CF' }, 
       { y:433, color: '#6FF' } 
      ], 
      connectNulls: true, 
      pointWidth: 58 
     }], exporting: { 
      buttons: { 
       contextButton: { 
        enabled: false 
       } 
      } 
     } 
    }); 
});