Столбчатые диаграммы с полосами

Могу ли я сделать что-то подобное?

введите здесь описание изображения

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

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

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


javascript amcharts
person Abhijith Nagaraja    schedule 19.06.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Хотя это невозможно сделать «из коробки», это можно реализовать с помощью 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>

Или тот же код на Codepen.

person martynasma    schedule 20.06.2015