Колонка Графики с полосками

Question

Могу ли я сделать что-то вроде этого?

У меня есть 2 категории здесь. (Первые 5 являются релевантными и последние 2 или нет, поэтому последние 2 имеют серый цвет.)

В первой категории, если значение ниже, скажем, 6, оно должно быть одного цвета, если оно находится между 6 и 8 , он должен иметь другой цвет и больше 8, он должен иметь 2 цвета, до 8 одного цвета и еще 8 цветов. Мне нравится знать, можем ли мы также предоставить полосы?

Раньше я использовал Highcharts и Amcharts, даже я создал небольшую библиотеку вокруг него. Но не удалось достичь этой функциональности. Любая помощь приветствуется в любой из этих библиотек.

Answer 1

Несмотря на то, что он не является готовым к работе, он может быть реализован с использованием amCharts с небольшим пользовательским кодом.

Полный рабочий код приведен ниже, но общая идея такова.

Когда диаграмма нагрузки (с помощью addInitHandler) мы делаем следующие шаги:

1. Проверьте график конфигурации пользовательских свойств для настройки порогов и цветов;
2. Задайте свойства и 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.