javascript - 带条纹的柱形图

我可以做这样的事情吗？



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

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

我以前曾经使用过Highcharts和Amcharts，甚至我也围绕它构建了一个小型图书馆。但是没能实现这个功能。这些库中的任何一个都将对您有所帮助

最佳答案

尽管无法立即使用，但可以使用带有少量自定义代码的amCharts来实现。

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

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


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


通过在数据中设置它们的颜色并使用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。

关于javascript - 带条纹的柱形图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30948874/