Question

我正在使用Highcharts（面积图）......

我尝试将线条颜色用作#f68936，将区域背景颜色用作10% of opacity颜色。当我使用一个图表时，它按预期工作。我在前面图表的不透明背景中遇到问题，同时结合更多区域。

绿色背景不透明度与红色混合并显示不同的颜色：（

虽然它有多个区域，但我如何显示原始颜色（background opacity）。

Online demo

预期结果

我得到的内容如下所示：

＆＃13;

$(function () {
  // Everything in common between the charts
  var commonOptions = {
    colors: ['#f68936', '#70ba47', '#33b5e6', '#fd8f40', '#e7ca60', '#40abaf', '#f6f7f8', '#e9e9eb'],
    chart: {
      style: {
        fontFamily: 'Roboto Light',
        fontWeight: 'normal',
        fontSize: '12px',
        color: '#585858',
      }
    },
    title: {
      text: null
    },
    subtitle: {
      text: null
    },
    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    xAxis: {
      title: {
        style: {
          fontFamily: 'Roboto',
          color: "#bbb",
        }
      },
      labels: {
        style:{ color: '#bbb' },
      },
      lineWidth: 1,
      tickLength: 0,
    },
    yAxis: {
      title: {
        style: {
          fontFamily: 'Roboto',
          color: "#bbb",
        }
      },
      offset:-6,
      labels: {
        style:{ color: '#bbb' },
        //format:'{value}K',
      },
      tickInterval: 100,
      lineWidth: 1,
      gridLineDashStyle: 'dash',
    },
    series: [{
      //backgroundColor: "rgba(0 ,0, 0, 1)",
    }],

    // Area Chart
    plotOptions: {
      series: {
        fillOpacity: 0.1
      },
      area: {
        lineWidth: 1,
        marker: {
          lineWidth: 2,
          symbol: 'circle',
          fillColor: 'white',
          radius:3,
        },
        legend: {
          radius: 2,
        }
      }
    },
    tooltip: {
      useHTML: true,
      shared: true,
      backgroundColor: '#5f5f5f',
      borderWidth: 0,
      style: {
        padding:10,
        color: '#fefefe',
      }
    },
    legend: {
      itemStyle: {
        fontFamily: 'Roboto Light',
        fontWeight: 'normal',
        fontSize: '12',
        color: '#666666',
      },
      marker: {
        symbol: 'square',
        verticalAlign: 'middle',
        radius: '4',
      },
      symbolHeight: 6,
      symbolWidth: 6,
    },
  };

  // -----------------------------------------------------
  $('.areaChartTwoWay').each(function() {
    $(this).highcharts(Highcharts.merge(commonOptions, {
      chart: { type: 'area' },
      xAxis: {
        title: { text: 'Date', },
        type: 'datetime',
        dateTimeLabelFormats: {
          day: '%eth %b'
        },
      },
      yAxis: {
        title: { text: 'Count', },
      },
      series: [{
        name: 'Forwards',
        color: '#f68936',
        marker: { lineColor: '#f68936', fillColor: 'white', },
        data: [185, 290, 198, 220, 180, 140, 220, 335, 197, 240],
        legendIndex:1,
        pointStart: Date.UTC(2016, 2, 11),
        pointInterval: 24 * 3600 * 1000 // one day
      }, {
        name: 'Unique opens',
        color: '#70ba47',
        marker: { lineColor: '#70ba47', fillColor: 'white', },
        data: [90, 95, 98, 80, 70, 68, 85, 71, 64, 90],
        legendIndex:0,
        pointStart: Date.UTC(2016, 2, 11),
        pointInterval: 24 * 3600 * 1000 // one day
      }]
    }))

  });

  $('.highcharts-grid > path:last-child').remove();
  $('.highcharts-markers > path:last-child').remove();

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div class="areaChartTwoWay" style="min-width: 150px; height: 250px; margin: 0 auto"></div>

＆＃13;

Answer 1

您的帖子准确描述了不完整不透明度的工作原理。您还期待什么其他结果？

如果你将某些东西的不透明度设置为小于1，那么它背后的任何东西都将是部分可见的 - 这意味着它将与前景颜色“混合”。

这不仅是预期的行为，也是唯一可行的行为。这意味着不完全不透明。

如果你希望你的系列颜色与你的系列在上的颜色相同，不透明度小于1，在白色背景，那么你需要确定它实际上是什么颜色，并将其设置为fillColor，不透明度为1。

Answer 2

您有两种可能性：

每个系列使用堆叠：http://www.highcharts.com/demo/area-stacked
使用区域范围系列：http://www.highcharts.com/demo/arearange

Highcharts - 区域fillOpacity混合在多个区域图表上

2 个答案: