列图表有条纹

Question

我可以这样做吗？

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

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

之前我使用过Highcharts和Amcharts，即使我在它周围建了一个小型库。但是没能实现这个功能。在这些库中的任何一个中都可以获得任何帮助

Answer 1

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

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

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

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

最后两列颜色是通过在数据中设置颜色并使用fillColorsField相应地自动着色来处理的。

这是完整的工作代码：

＆＃13;
＆＃13;
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"]);
＆＃13;
#chartdiv {
  width: 500px;
  height: 300px;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

或same code on Codepen。