如何在高圖中更改酒吧的寬度？

使用類似this one的條形圖，可以改變條的寬度來表示另一個數據屬性，比如說水果的重量。水果越重，酒吧越厚。如何在高圖中更改酒吧的寬度？

你玩腳本here。我打開其他JavaScript繪圖庫，只要他們是免費的，可以做到這一點。

$(function() { 
    var chart; 
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'column' 
      }, 
      title: { 
       text: 'Column chart with negative values' 
      }, 
      xAxis: { 
       categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
      }, 
      tooltip: { 
       formatter: function() { 
        return ''+ 
         this.series.name +': '+ this.y +''; 
       } 
      }, 
      credits: { 
       enabled: false 
      }, 
      series: [{ 
       name: 'John', 
       data: [5, 3, 4, 7, 2] 
       // I would like something like this (3.5, 6 etc is the width) : 
       // data: [[5, 3.4], [3, 6], [4, 3.4], [7, 2], [2, 5]] 
      }, { 
       name: 'Jane', 
       data: [2, -2, -3, 2, 1] 
      }, { 
       name: 'Joe', 
       data: [3, 4, 4, -2, 5] 
      }] 
     }); 
    }); 

});

來源

2012-10-24 Benjamin Crouzier

看起來不像它Highcharts，因爲它是基於內容的寬度尺寸。如果瀏覽器不固定，請擴展您的瀏覽器並重新繪製圖表以適應其新寬度，儘管我對Highcharts相對來說比較新。 – Mathachew

http://api.highcharts.com/highcharts#plotOptions.column.pointWidth –

@HardikMishra不錯的一點，不幸的是我想每個酒吧的寬度不同。 –

pointWidth是你需要設置條的寬度什麼。嘗試

plotOptions: { 
      series: { 
       pointWidth: 15 
      } 
     }

與15像素的寬度。這顯示條。在here附近玩。只是編輯了已有的代碼。

來源

2012-10-30 07:37:39

爲我工作，並容易適用於在紅寶石中使用寶石時的圖表踢對象 – Ben

FusionCharts的可能是最好的選擇，如果你有這方面做更多的優化Marimekko的圖表許可證...

我已經做了一些工作，試圖讓highcharts一個Marimekko的圖表解決方案。這不是完美的，但近似於這裏找到融合圖表頁上的第一Marimekko的圖表例子...

http://www.fusioncharts.com/resources/chart-tutorials/understanding-the-marimekko-chart/

的關鍵是使用一個DATETIME軸，爲模式提供了更大的靈活性，你如何分發點並在X軸上行，這使您可以在該軸上構建可變大小的「條」。我使用0-1000秒的空間，並在圖表的外部找出這個比例的映射來近似百分比值來調整垂直線。這裏（http://jsfiddle.net/miken/598d9/2/）是一個jsfiddle例子，它創建一個可變寬度的柱狀圖。

$(function() { 

    var chart; 
     Highcharts.setOptions({ 
      colors: [ '#75FFFF', '#55CCDD', '#60DD60' ] 
     }); 
     $(document).ready(function() { 
      var CATEGORY = { // number out of 1000 
      0: '',  
      475: 'Desktops', 
      763: 'Laptops', 
      1000: 'Tablets' 
     }; 
     var BucketSize = { 
      0: 475, 
      475: 475, 
      763: 288, 
      1000: 237 
     }; 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'area' 
      }, 
      title: { 
       text: 'Contribution to Overall Sales by Brand & Category (in US$)<br>(2011-12)' 
      }, 
      xAxis: { 
       min: 0, 
       max: 1000, 
       title: { 
        text: '<b>CATEGORY</b>' 
       }, 
       tickInterval: 1, 
       minTickInterval: 1, 
       dateTimeLabelFormats: { 
        month: '%b' 
       }, 
       labels: { 
        rotation: -60, 
        align: 'right', 
        formatter: function() { 
         if (CATEGORY[this.value] !== undefined) { 
          return '<b>' + CATEGORY[this.value] + ' (' + 
           this.value/10 + '%)</b>'; 
         } 
        } 
       } 
      }, 
      yAxis: { 
       max: 100, 
       gridLineWidth: 0, 
       title: { 
        text: '<b>% Share</b>' 
       }, 
       labels: { 
        formatter: function() { 
         return this.value +'%' 
        } 
       } 
      }, 
      tooltip: { 
       shared: true, 
       useHTML: true, 
       formatter: function() { 
        var result = 'CATEGORY: <b>' + 
         CATEGORY[this.x] + ' (' + Highcharts.numberFormat(BucketSize[this.x]/10,1) + '% sized bucket)</b><br>'; 
        $.each(this.points, function(i, datum) { 
         if (datum.point.y !== 0) { 
          result += '<span style="color:' + 
           datum.series.color + '"><b>' + 
           datum.series.name + '</b></span>: ' + 
            '<b>$' + datum.point.y + 'K</b> (' + 
           Highcharts.numberFormat(
            datum.point.percentage,2) + 
           '%)<br/>'; 
         } 
        }); 
       return (result); 
       } 
      }, 
      plotOptions: { 
       area: { 
        stacking: 'percent', 
        lineColor: 'black', 
        lineWidth: 1, 
        marker: { 
         enabled: false 
        }, 
        step: true 
       } 
      }, 
      legend: { 
       layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'top', 
       x: 0, 
       y: 100, 
       borderWidth: 1, 
       title: { 
       text : 'Brand:' 
       } 
      }, 
      series: [ { 
       name: 'HP', 
       data: [ 
        [0,298], 
        [475,109], 
        [763,153], 
        [1000,153]   
       ] 
      }, { 
       name: 'Dell', 
       data: [ 
        [0,245], 
        [475,198], 
        [763,120], 
        [1000,120] 
       ] 
      }, { 
       name: 'Sony', 
       data: [ 
        [0,335], 
        [475,225], 
        [763,164], 
        [1000,164]   
       ] 
      }] 
     }, 
     function(chart){  
      // Render bottom line. 
      chart.renderer.path(['M', chart.plotLeft, chart.plotHeight + 66, 'L', chart.plotLeft+chart.plotWidth, chart.plotHeight + 66]) 
      .attr({ 
       'stroke-width': 3, 
       stroke: 'black', 
       zIndex:50 
      }) 
      .add(); 
      for (var category_idx in CATEGORY) { 
       chart.renderer.path(['M', (Math.round((category_idx/1000) * chart.plotWidth)) + chart.plotLeft, 66, 'V', chart.plotTop + chart.plotHeight]) 
       .attr({ 
        'stroke-width': 1, 
        stroke: 'black', 
        zIndex:4 
       }) 
       .add(); 
      } 
     }); 
    }); 
});

它增加了一個額外的陣列中，讓你的類別名稱映射到第二抽動值給你更多的「類別」的觀點，你可能想要的。我還在底部添加了代碼，它在不同的列和圖表的底線之間添加了垂直分隔線。它可能需要對周圍標籤的大小進行一些調整，這些是我在這裏用像素硬編碼的一部分，但它應該是可行的。

使用「百分比」類型的口音可以讓您用y比例計算出原始數據中的百分比總數，而如前所述，您需要爲x軸執行自己的數學運算。我更依賴工具提示功能來提供標籤等，而不是圖表上的標籤。

這項工作的另一個重大改進是找到一種方法，使工具提示懸停區域和標籤集中並居中幷包圍酒吧本身，而不是現在每個酒吧的右邊框。如果有人想補充一點，請隨時留在這裏。

來源

2013-08-12 04:37:14

我使用一組面積圖來模擬可變寬度列/條形圖。假設每個欄/欄都用矩形區域表示。

看我的小提琴演示（http://jsfiddle.net/calfzhou/TUt2U/）。

$(function() { 
    var rawData = [ 
     { name: 'A', x: 5.2, y: 5.6 }, 
     { name: 'B', x: 3.9, y: 10.1 }, 
     { name: 'C', x: 11.5, y: 1.2 }, 
     { name: 'D', x: 2.4, y: 17.8 }, 
     { name: 'E', x: 8.1, y: 8.4 } 
    ]; 

    function makeSeries(listOfData) { 
     var sumX = 0.0; 
     for (var i = 0; i < listOfData.length; i++) { 
      sumX += listOfData[i].x; 
     } 
     var gap = sumX/rawData.length * 0.2; 
     var allSeries = [] 
     var x = 0.0; 
     for (var i = 0; i < listOfData.length; i++) { 
      var data = listOfData[i]; 
      allSeries[i] = { 
       name: data.name, 
       data: [ 
        [x, 0], [x, data.y], 
        { 
         x: x + data.x/2.0, 
         y: data.y, 
         dataLabels: { enabled: true, format: data.x + ' x {y}' } 
        }, 
        [x + data.x, data.y], [x + data.x, 0] 
       ], 
       w: data.x, 
       h: data.y 
      }; 
      x += data.x + gap; 
     } 
     return allSeries; 
    } 

    $('#container').highcharts({ 
     chart: { type: 'area' }, 
     xAxis: { 
      tickLength: 0, 
      labels: { enabled: false} 
     }, 
     yAxis: { 
      title: { enabled: false} 
     }, 
     plotOptions: { 
      area: { 
       marker: { 
        enabled: false, 
        states: { 
         hover: { enabled: false } 
        } 
       } 
      } 
     }, 
     tooltip: { 
      followPointer: true, 
      useHTML: true, 
      headerFormat: '<span style="color: {series.color}">{series.name}</span>: ', 
      pointFormat: '<span>{series.options.w} x {series.options.h}</span>' 
     }, 
     series: makeSeries(rawData) 
    }); 
});

my demo chart

來源

2013-12-13 15:10:25 calfzhou

非常感謝！ –

'rawData'應該是第15行的'listOfData'。 –

如何在高圖中更改酒吧的寬度？

回答

相關問題