帶條紋的柱狀圖

Question

我可以做這樣的事嗎？

我這裏有2個類別。 （前5個是相關的，後2個或沒有，這就是後2個爲灰色的原因。）

第一類，如果值低於6，則應該是一種顏色，如果它在6和8之間，它應該有其他顏色和大於8，它應該有2種顏色，最多8種一種顏色，並且> 8種另一種顏色。我想知道我們是否也可以提供條紋？

我以前使用過Highcharts和Amcharts，即使我也在周圍建了一個小型圖書館。但是沒有能夠實現這個功能。在這些庫中的任何一個都可以獲得任何幫助

Answer 1

雖然不是現成的，但它可以使用amCharts實現，並帶有一些自定義代碼。

完整的工作代碼如下，但一般的想法是這樣的。

當圖表負載（用addInitHandler），我們做這些步驟：

1. 檢查圖表配置自定義屬性設置閾值和顏色;
2. 設置圖形的negativeBase和negativeFillColors屬性，以便圖表本身可以處理高於或低於特定值閾值的列着色;
3. 遍歷數據並查看是否有超過某個閾值的列（在本例中爲8）。如果有的話，我們在我們的數據中創建兩個額外的值，稍後我們將使用它們來放置不同顏色的浮動列圖以着色這些列的「提示」;
4. 添加提示的浮動圖形; （如上所示）
5. 最後，在使用模式填充的其他圖表上添加一個附加圖形，以應用漂亮的條紋效果。

最後兩列顏色的處理方式是設置它們在數據中的顏色，並使用fillColorsField來相應地自動對它們進行着色。

下面是完整的工作代碼：

var chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "serial", 
 
    /** 
 
    * These are not built-in properties 
 
    * We are just setting those to be used by our custom plugin 
 
    */ 
 
    "customProperties": { 
 
    "threshold1": 6.1, 
 
    "thresholdColor1": "#93bcdc", 
 
    "threshold2": 8, 
 
    "thresholdColor2": "#eab144" 
 
    }, 
 
    "dataProvider": [{ 
 
    "country": "USA", 
 
    "visits": 9 
 
    }, { 
 
    "country": "China", 
 
    "visits": 10 
 
    }, { 
 
    "country": "Japan", 
 
    "visits": 8 
 
    }, { 
 
    "country": "Germany", 
 
    "visits": 6 
 
    }, { 
 
    "country": "UK", 
 
    "visits": 8, 
 
    "fillColor": "#cccccc" 
 
    }, { 
 
    "country": "France", 
 
    "visits": 8, 
 
    "fillColor": "#cccccc" 
 
    }], 
 
    "valueAxes": [{ 
 
    "gridAlpha": 0.1, 
 
    "dashLength": 0, 
 
    "stackType": "regular" 
 
    }], 
 
    "startDuration": 1, 
 
    "graphs": [{ 
 
    "fillAlphas": 1, 
 
    "fillColors": "#345e80", 
 
    "fillColorsField": "fillColor", 
 
    "lineAlpha": 0, 
 
    "type": "column", 
 
    "valueField": "visits", 
 
    "xpattern": { 
 
     "url": "patterns/white/pattern10.png", 
 
     "width": 4, 
 
     "height": 8 
 
    } 
 
    }], 
 
    "chartCursor": { 
 
    "zoomable": false, 
 
    "cursorAlpha": 0 
 
    }, 
 
    "categoryField": "country", 
 
    "categoryAxis": { 
 
    "gridPosition": "start", 
 
    "gridAlpha": 0, 
 
    "tickPosition": "start", 
 
    } 
 
}); 
 

 
/** 
 
* Custom plugin 
 
*/ 
 
AmCharts.addInitHandler(function(chart) { 
 

 
    // check if customProperties is set 
 
    // do nothing if it's not 
 
    if (chart.customProperties === undefined) 
 
    return; 
 

 
    // let get our custom properties into a easy variable 
 
    var c = chart.customProperties; 
 
    
 
    // we'll just assume that we'll use the first graph in the chart 
 
    var graph = chart.graphs[0]; 
 

 
    // first let's set negative base values and colors 
 
    // so the chart automatically handles coloring of 
 
    // graphs lower than threshold1 
 
    if (c.threshold1 !== undefined) { 
 
    graph.negativeBase = c.threshold1; 
 
    graph.negativeFillColors = c.thresholdColor1; 
 
    } 
 

 
    // now the hardest part - color top sections of 
 
    // columns over certain threshold 
 
    // for that we'll neet to iterate through the data 
 
    for(var i = 0; i < chart.dataProvider.length; i++) { 
 
    var row = chart.dataProvider[i]; 
 
    if (row[graph.valueField] > c.threshold2) { 
 
     // bigger value 
 
     // let's add a floating values for our floating oeverlay graph 
 
     row[graph.valueField + 'Close'] = row[graph.valueField]; 
 
     row[graph.valueField + 'Open'] = c.threshold2; 
 
    } 
 
    } 
 
    
 
    // now let's add a separate floating graph that will color the tips 
 
    var tipGraph = new AmCharts.AmGraph(); 
 
    tipGraph.valueField = graph.valueField + 'Close'; 
 
    tipGraph.openField = graph.valueField + 'Open'; 
 
    tipGraph.stackable = false; 
 
    tipGraph.clustered = false; 
 
    tipGraph.lineAlpha = 0; 
 
    tipGraph.fillAlphas = 1; 
 
    tipGraph.fillColors = c.thresholdColor2; 
 
    tipGraph.type = "column"; 
 
    tipGraph.showBalloon = false; 
 
    chart.addGraph(tipGraph); 
 
    
 
    // now let's add dummy graph with patterns to go over the 
 
    // actual graph to provide the striped effect 
 
    var stripeGraph = new AmCharts.AmGraph(); 
 
    stripeGraph.valueField = graph.valueField; 
 
    stripeGraph.stackable = false; 
 
    stripeGraph.clustered = false; 
 
    stripeGraph.lineAlpha = 0; 
 
    stripeGraph.fillAlphas = 1; 
 
    stripeGraph.type = "column"; 
 
    stripeGraph.showBalloon = false; 
 
    stripeGraph.pattern = { 
 
    "url": "patterns/white/pattern10.png", 
 
    "width": 4, 
 
    "height": 8 
 
    }; 
 
    chart.addGraph(stripeGraph); 
 

 
}, ["serial"]);

#chartdiv { 
 
    width: 500px; 
 
    height: 300px; 
 
}

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="http://www.amcharts.com/lib/3/serial.js"></script> 
 
<div id="chartdiv"></div>

還是same code on Codepen。