Question

我已经附加了到目前为止的漏斗可视化代码。

$(function() {
  var dataEx = [
      ['1 Visit', 352000],
      ['2 Visits', 88000],
      ['3+ Visits', 42000]
    ],
    len = dataEx.length,
    sum = 0,
    minHeight = 0.05,
    data = [];
    
   //specify your percent of prior visit value manually here:
   
   var perc = [100, 25, 48];

  for (var i = 0; i < len; i++) {
    sum += dataEx[i][1];
  }

  for (var i = 0; i < len; i++) {
    var t = dataEx[i],
      r = t[1] / sum;
    data[i] = {
      name: t[0],
      y: (r > minHeight ? t[1] : sum * minHeight),
      percent: perc[i],   // <----- this here is manual input
			//percent: Math.round(r * 100),    <--- this here is mathematical
      label: t[1]
    }
  }
  console.log(dataEx, data)
  $('#container').highcharts({
    chart: {
      type: 'funnel',
      marginRight: 100,


      events: {
        load: function() {
          var chart = this;
          Highcharts.each(chart.series[0].data, function(p, i) {
          	var bBox = p.dataLabel.getBBox()
            p.dataLabel.attr({
              x: (chart.plotWidth - chart.plotLeft) / 2,
              'text-anchor': 'middle',
              y: p.labelPos.y - (bBox.height / 2)
            })
          })
        },
        redraw: function() {
          var chart = this;
          Highcharts.each(chart.series[0].data, function(p, i) {
            p.dataLabel.attr({
              x: (chart.plotWidth - chart.plotLeft) / 2,
              'text-anchor': 'middle',
              y: p.labelPos.y - (bBox.height / 2)
            })
          })
        }
      },
    },

    title: {
      text: 'Guest Return Funnel',
      x: -50
    },
    tooltip: {
      //enabled: false
      formatter: function() {
        return '<b>' + this.key +
          '</b><br/>Percent of Prior Visit: '+ this.point.percent + '%<br/>Guests: ' + Highcharts.numberFormat(this.point.label, 0);
      }
    },
    plotOptions: {
      series: {


        allowPointSelect: true,
        borderWidth: 12,

        animation: {
          duration: 400
        },


        dataLabels: {
          enabled: true,

          connectorWidth: 0,
          distance: 0,

          formatter: function() {
            var point = this.point;
            console.log(point);
            return '<b>' + point.name + '</b> (' + Highcharts.numberFormat(point.label, 0) + ')<br/>' + point.percent + '%';
          },
          minSize: '10%',
          color: 'black',
          softConnector: true
        },

        neckWidth: '30%',
        neckHeight: '0%',
        width: '50%',
        height: '110%'


        //old options are as follows:

        //neckWidth: '50%',
        //neckHeight: '50%',
        //-- Other available options
        //height: '200'
        // width: pixels or percent
      }
    },
    legend: {
      enabled: false
    },
    series: [{
      name: 'Unique users',
      data: data
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/funnel.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>

我想要做的是手动更改漏斗每个类别（片断）的颜色（例如，第一类别为红色，第二类别为橙色，第三类别为黄色）。我知道有一些方法可以将数据输入到Highcharts中的一系列数据中，例如：

[[''CATEOGRY'，'VALUE]，... ['CATEGORY'，'VALUE']]

或者您可以使用名称值创建一个数组并指定类似内容

颜色：其中的颜色为“＃00FF00”。

所以也许我可以使用第二种形式将数据写入系列，因为您可以指定颜色。

但是，如何还能确保零件的颜色，同时还要确保当值较小时代码处理算法能够按比例缩放，而其余代码也能正常工作？

此外，鉴于我在代码中拥有的当前数据数组，是否有任何方法可以指定颜色？正在dataEx = [['CATEOGRY'，'VALUE]，... ['CATEGORY，'VALUE']]

Answer 1

您可以简单地将颜色设置为dataEx数组中的第三个元素，然后将其设置为点颜色：

var dataEx = [
        ['1 Visit', 352000, 'red'],
        ['2 Visits', 88000, 'orange'],
        ['3+ Visits', 42000, 'yellow']
    ],
    len = dataEx.length,
    sum = 0,
    minHeight = 0.05,
    data = [];

//specify your percent of prior visit value manually here:

var perc = [100, 25, 48];

for (var i = 0; i < len; i++) {
    sum += dataEx[i][1];
}

for (var i = 0; i < len; i++) {
    var t = dataEx[i],
        r = t[1] / sum;
    data[i] = {
        name: t[0],
        color: t[2],
        y: (r > minHeight ? t[1] : sum * minHeight),
        percent: perc[i], // <----- this here is manual input
        //percent: Math.round(r * 100),    <--- this here is mathematical
        label: t[1]
    }
}

实时演示：https://jsfiddle.net/BlackLabel/8be3c1sm/

API参考：https://api.highcharts.com/highcharts/series.funnel.data.color

在Highcharts渠道中使用数组数据格式设置颜色

1 个答案: