带条纹的柱形图

Question

我可以做这样的事情吗？

我这里有 2 个类别。（前 5 个相关，后 2 个不相关，这就是为什么后 2 个是灰色的。）

在第一类中，如果值小于6，应该是一种颜色，如果介于6和8之间，应该是其他颜色，大于8，应该是2种颜色，最多8种颜色，>8 另一种颜色。我想知道我们是否也可以提供条纹？

我以前用过Highcharts和Amcharts，甚至我也围绕它建立了一个小图书馆。但是没能实现这个功能。在这些库中的任何一个中都感谢任何帮助

Answer 1

虽然不能开箱即用，但可以使用带有少量自定义代码的 amCharts 来实现。

完整的工作代码如下，但总体思路是这样的。

加载图表时（使用 addInitHandler）我们执行以下步骤：

检查用于设置阈值和颜色的自定义属性的图表配置；
设置图表的 negativeBase 和 negativeFillColors 属性，以便图表本身可以处理高于或低于特定值阈值的列的着色；
遍历数据并查看是否有任何列超过特定阈值（在您的示例中为 8）。如果有，我们会在我们的数据中创建两个额外的值，稍后我们将使用它们来放置不同颜色的浮动柱形图来为这些柱的 "tips" 着色；
为提示添加浮动图；（如上）
最后在其余图表上添加一个额外的图表，使用图案填充来应用漂亮的条纹效果。

最后两列颜色是通过在数据中设置它们的颜色并使用 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.

带条纹的柱形图

Column Charts with stripes

javascript

amcharts