javascript - 带条纹的柱形图

Question

我可以做这样的事情吗？

我这里有 2 个类别。 (前 5 个相关，后 2 个不相关，这就是为什么最后 2 个为灰色。)

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

我以前使用过 Highcharts 和 Amcharts，甚至我还围绕它建立了一个小型库。但没能实现这个功能。感谢这些库中的任何一个的帮助

Answer 1

虽然无法开箱即用，但可以使用 amCharts 和一些自定义代码来实现。

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

当图表加载时(使用 addInitHandler )，我们执行以下步骤:

1. 检查图表配置中的自定义属性以设置阈值和颜色；
2. 设置图表的 maleBase 和 maleFillColors 属性，以便图表本身可以处理高于或低于特定值阈值的列的着色；
3. 迭代数据并查看是否有任何列超过特定阈值(在您的示例中为 8)。如果有，我们在数据中创建两个附加值，稍后我们将使用它们来放置不同颜色的 float 柱形图，为这些列的“提示”着色；
4. 添加 float 图表提示； (如上所述)
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 .