HIGHCHARTS - 基於上一列值的列值

我使用Highcharts得到了一些問題。HIGHCHARTS - 基於上一列值的列值

我需要根據列「B」的值繪製第三列「C」的高度（默認情況下，「C」列的高度繪製基於列「A」）我創建了一個簡單的例子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 
        } 
       } 
      } 
     }); 
    });

來源

2016-09-27 Julio Pinheiro

我看不到你的示例代碼點......至於你的要求......你傳遞給series.data數組必須提前做好準備（在這裏你可以做所有你需要）....但我會建議從數據源準備數據 –

嗨Rakesh，你看到我發佈的鏈接了嗎？我的目標是繪製列。 http://jsfiddle.net/JVNjs/1201/ –

我與胡里奧工作在這種情況下，我們解決這個問題。分辨率：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 
       } 
      } 
     } 
    }); 
});

來源

2016-09-27 17:41:15 Gavioli

HIGHCHARTS - 基於上一列值的列值

回答

相關問題