javascript - ColorLuminance 错误的颜色

您的范围极小且差异很大，因此使用这些设置当然颜色会显得非常暗。该算法尝试根据您的范围和亮度从您的值创建颜色，亮度是从您的方差除以列值乘以范围内的平均值得出的。对于您的黄色和绿色范围，计算出的亮度通常远高于 1，而它通常应该是 0-1 之间的值，这就是为什么它很容易从黄色/绿色变为黑色的原因。

将变化值设置为小得多的小数将解决此问题：

  "colorRanges": [{
    "start": -1,
    "end": 0,
    "color": "#FF0000",
    "variation": 0.4,
    "valueProperty": "visits",
    "colorProperty": "color"
  }, {
    "start": .001,
    "end": .150,
    "color": "#FFFF00",
    "variation": 0.1,
    "valueProperty": "visits",
    "colorProperty": "color"
  }, {
    "start": .151,
    "end": 1,
    "color": "#008000",
    "variation": 0.2,
    "valueProperty": "visits",
    "colorProperty": "color"
  }],

演示如下：

/**
 * AmCharts plugin: Auto-calculate color based on value
 * The plugin relies on custom chart propety: `colorRanges`
 */
AmCharts.addInitHandler(function(chart) {

  var dataProvider = chart.dataProvider;
  var colorRanges = chart.colorRanges;

  // Based on https://www.sitepoint.com/javascript-generate-lighter-darker-color/
  function ColorLuminance(hex, lum) {

    // validate hex string
    hex = String(hex).replace(/[^0-9a-f]/gi, '');
    if (hex.length < 6) {
      hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    }
    lum = lum || 0;

    // convert to decimal and change luminosity
    var rgb = "#",
      c, i;
    for (i = 0; i < 3; i++) {
      c = parseInt(hex.substr(i * 2, 2), 16);
      c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
      rgb += ("00" + c).substr(c.length);
    }

    return rgb;
  }

  if (colorRanges) {

    var item;
    var range;
    var valueProperty;
    var value;
    var average;
    var variation;
    for (var i = 0, iLen = dataProvider.length; i < iLen; i++) {

      item = dataProvider[i];

      for (var x = 0, xLen = colorRanges.length; x < xLen; x++) {

        range = colorRanges[x];
        valueProperty = range.valueProperty;
        value = item[valueProperty];

        if (value >= range.start && value <= range.end) {
          average = (range.start - range.end) / 2;

          if (value <= average)
            variation = (range.variation * -1) / value * average;
          else if (value > average)
            variation = range.variation / value * average;

          item[range.colorProperty] = ColorLuminance(range.color, variation.toFixed(2));
        }
      }
    }
  }

}, ["serial"]);

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "colorRanges": [{
    "start": -1,
    "end": 0,
    "color": "#FF0000",
    "variation": 0.4,
    "valueProperty": "visits",
    "colorProperty": "color"
  }, {
    "start": .001,
    "end": .150,
    "color": "#FFFF00",
    "variation": 0.1,
    "valueProperty": "visits",
    "colorProperty": "color"
  }, {
    "start": .151,
    "end": 1,
    "color": "#008000",
    "variation": 0.2,
    "valueProperty": "visits",
    "colorProperty": "color"
  }],
  "dataProvider": [{
    "country": "USA",
    "visits": -.01
  }, {
    "country": "China",
    "visits": .01
  }, {
    "country": "Japan",
    "visits": -0.1809
  }, {
    "country": "Germany",
    "visits": 0.02
  }, {
    "country": "UK",
    "visits": 0.149
  }, {
    "country": "France",
    "visits": .1114
  }, {
    "country": "India",
    "visits": .984
  }, {
    "country": "Spain",
    "visits": -.711
  }, {
    "country": "Netherlands",
    "visits": .15
  }, {
    "country": "Russia",
    "visits": .0151
  }, {
    "country": "South Korea",
    "visits": .155
  }, {
    "country": "Canada",
    "visits": .411
  }, {
    "country": "Brazil",
    "visits": .395
  }],
  "valueAxes": [{
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  }],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [{
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits",
    "colorField": "color"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0,
    "tickPosition": "start",
    "tickLength": 20
  },
  "export": {
    "enabled": true
  }

});

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
  width: 100%;
  height: 100%;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

javascript - ColorLuminance 错误的颜色

问题描述

解决方案

推荐阅读