Highcharts设置背景颜色和不透明度

时间:2016-03-23 19:33:50

标签: javascript jquery html highcharts

对于类型为area的图表,有没有办法在highcharts中设置背景颜色和不透明度?

根据文档,您必须通过将颜色指定为rgb值然后添加不透明度值来设置不透明度。但是,当我这样做时,我得到图表的填充颜色为黑色。以下是我的代码

<script type="text/javascript">
$(function() {
 var javascriptArray = <?php echo json_encode($array);?>;
 var newjavascriptArray = <?php echo json_encode($uniqueDates);?>;
 var valueArray = <?php echo json_encode($total); ?>;
 var js_array2 = [5, 10, 15];
  $('#container').highcharts({
  credits : {
  enabled: false
},
exporting:
{
  enabled: false
},
  chart: {
      backgroundColor: '#10416A',
      type: "area"

  },
  title: {
    style : {
      color: "white"
    },
      text: "Progress"
  },
  subtitle: {
    style : {
      color: "white"
    },
      text: 'Village Print & Media'
  },
  xAxis: {
  // gridLineWidth: 0,
  // lineWidth: 0,
  // minorGridLineWidth: 0,
    title:{
      style: {
        color : "white"
      },
        margin: 50,
        text: "February"
    },
    labels: {
    style : {
      color: "white"
    },
  },
    categories: newjavascriptArray
  },
  yAxis: {
    allowDecimals: false,
      title: {
        style: {
          color : "white"
        },
          text: "Points"
      },
      labels : {
        style: {
            color: "white"
        },
      },
  },

      plotOptions: {

        series: {
        color: "#00A6CE",
        lineColor: "#00A6CE",
        fillColor: 'rgb(0, 166, 206, 0.4)',
        // fillOpacity: 0.8,
        marker : {
          fillColor: "#00A6CE"
        },
         },
      line: {
          dataLabels: {
              enabled: false
          },
          enableMouseTracking: true
      }


  },
  legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 2,
      color: "white"
  },
  series: [{
      name: 'Points Ray',
      color: "white",
      dataLabels: {
        color:"white"
      },
      data: valueArray
  }]
 });
});

1 个答案:

答案 0 :(得分:2)

http://api.highcharts.com/highcharts#plotOptions.area.fillOpacity

  

请注意,设置显式fillColor时,不会应用fillOpacity。

因此您无法使用fillOpacity属性。

我已经尝试过您的代码了 fillColor: 'rgb(0, 166, 206, 0.4)' 不支持不透明度,但它可以正常使用 fillColor: 'rgba(0, 166, 206, 0.4)'

希望得到这个帮助。