如何創建一個具有重疊列寬度可變的javascript列表圖表

我想創建一個列表圖表，我可以指定每列在x軸上的開始和結束位置，並且具有如下圖所示的列重疊。如何創建一個具有重疊列寬度可變的javascript列表圖表

我看過谷歌圖表和chartjs，但沒有看到類似的東西。我如何着手創建這樣的圖表？

Overlapping column chart

來源

2017-03-16 TheConfusedCoder

我認爲谷歌圖表**做支撐**重疊。再次檢查。 –

這看起來更像是一個帶有多個系列的「區域」圖表：http://api.highcharts.com/highcharts/plotOptions.area – wergeld

感謝您的好主意Wegeld。我看過這個和麪積圖，似乎沒有辦法將它變成列。面積圖繪製一條線併爲下面的線添加顏色。我能得到的最接近的東西就是將列變成金字塔，我想。 – TheConfusedCoder

谷歌圖表例子...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['x', 'y0', 'y1', 'y2', 'y3'], 
 
    [6, 0, null, null, null], 
 
    [6, 55, null, null, null], 
 
    [36, 55, null, null, null], 
 
    [36, 0, null, null, null], 
 
    [32, null, 0, null, null], 
 
    [32, null, 45, null, null], 
 
    [74, null, 45, null, null], 
 
    [74, null, 0, null, null], 
 
    [62, null, null, 0, null], 
 
    [62, null, null, 51, null], 
 
    [91, null, null, 51, null], 
 
    [91, null, null, 0, null], 
 
    [87, null, null, null, 0], 
 
    [87, null, null, null, 44], 
 
    [116, null, null, null, 44], 
 
    [116, null, null, null, 0], 
 
    ]); 
 

 
    var view = new google.visualization.DataView(data); 
 
    var viewColumns = []; 
 
    for (var i = 0; i < data.getNumberOfColumns(); i++) { 
 
    viewColumns.push(i); 
 
    if (i > 0) { 
 
     viewColumns.push(getStyle(i - 1, (i === 3) ? '#707b7c' : false)); 
 
    } 
 
    } 
 
    view.setColumns(viewColumns); 
 

 
    function getStyle(series, strokeColor) { 
 
    return { 
 
     role: 'style', 
 
     type: 'string', 
 
     calc: function (dt, row) { 
 
     var pointStyle; 
 

 
     switch (row) { 
 
      case (series * 4): 
 
      pointStyle = 'point {fill-color: #ffffff; stroke-color: #229954; stroke-width: 3;}'; 
 
      break; 
 

 
      case ((series * 4) + 3): 
 
      pointStyle = 'point {fill-color: #ffffff; stroke-color: #cb4335; stroke-width: 3;}'; 
 
      break; 
 

 
      default: 
 
      pointStyle = 'point {opacity: 0;}'; 
 
     } 
 
     if (strokeColor) { 
 
      pointStyle += ' line {color: ' + strokeColor + '}'; 
 
     } 
 
     return pointStyle; 
 
     } 
 
    }; 
 
    } 
 

 
    var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
 
    chart.draw(view, { 
 
    colors: ['#f39c12', '#f39c12', '#d35400', '#f39c12'], 
 
    hAxis: { 
 
     viewWindow: { 
 
     min: 0, 
 
     max: 120 
 
     } 
 
    }, 
 
    legend: { 
 
     position: 'none' 
 
    }, 
 
    pointSize: 6 
 
    }); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

來源

2017-03-16 23:19:25 WhiteHat

這很棒。這次真是萬分感謝。非常感謝！ – TheConfusedCoder

如何創建一個具有重疊列寬度可變的javascript列表圖表

回答

相關問題