Question

首先设置 - 需要使用的JavaScript文件：我的整个应用程序使用以下js库在多个页面上实现图形，并根据条件是不同的报告类型进行配置，

    <script src="https://code.highcharts.com/highcharts.src.js"></script>
    <script src="https://code.highcharts.com/modules/treemap.src.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <div id="container"></div>
    <button id='update'>Update</button>

第一套图书馆的结果

Common HighChart - 使用不同的JavaScript文件集配置如下：以下代码行为2组库生成图形。

var options = {
  colorAxis: {
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0],
    labels: {
      style: {
        fontSize: '10px',
        fontFamily: 'Arial'
      }
    }
  },
  series: [{
    type: 'treemap',
    layoutAlgorithm: 'squarified',
    data: [{
      name: 'A',
      value: 6,
      colorValue: 1
    }, {
      name: 'B',
      value: 6,
      colorValue: 2
    }, {
      name: 'C',
      value: 4,
      colorValue: 3
    }, {
      name: 'D',
      value: 3,
      colorValue: 4
    }, {
      name: 'E',
      value: 2,
      colorValue: 5
    }, {
      name: 'F',
      value: 2,
      colorValue: 6
    }, {
      name: 'G',
      value: 1,
      colorValue: 7
    }]
  }],
  title: {
    text: 'Highcharts Treemap'
  }
};

var chart = Highcharts.chart('container', options);

$('#update').click(function() {
  chart.update({
    chart: {
      style: {
        fontSize: '20px',
        fontFamily: 'HelveticaNeue'
      }
    }
  });

  chart.colorAxis[0].update({
    minColor: '#C9364F',
    maxColor: '#36C940',
    labels: {
      style: {
        fontSize: '20px',
        fontFamily: 'HelveticaNeue'
      }
    }
  });
});

**第二组JavaScript文件 - **以下是

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>

<div id="container"></div>
<button id='update'>Update</button>

第二套图书馆的结果

以下代码行为第二组库创建蓝色阴影

 colorAxis: {
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0],
    labels: {
      style: {
        fontSize: '10px',
        fontFamily: 'Arial'
      }
    }
  }

上述coloraxis参数不适用于First Result。第一种情况是否有不同的方法来实现色轴。

var _Alphabets

  = [{
  name: 'A',
  value: 6,
  color: '#80FF00'
}, {
  name: 'B',
  value: 6,
  color: '#ADFF30'
}, {
  name: 'C',
  value: 4,
  color: '#00FF7F'
}, {
  name: 'D',
  value: 3,
    color: '#90EE90'
}, {
  name: 'E',
  value: 2,
    color: '#8EBC8E'
}, {
  name: 'F',
  value: 2,
 color: '#3CB371'
}, {
  name: 'G',
  value: 1,
color: '#2E8A57'
}];

var _Fruits

  = [{
  name: 'mango',
  value: 6,
   colorValue: 1
}, {
  name: 'Mango',
  value: 6,
  colorValue: 2
}, {
  name: 'Orange',
  value: 4,
  colorValue: 3
}, {
  name: 'Pomgranate',
  value: 3,
  colorValue: 4
}, {
  name: 'Guava',
  value: 2,
  colorValue: 5
}]
var options = {
  colorAxis: {
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0],
    labels: {
      style: {
        fontSize: '10px',
        fontFamily: 'Arial'
      }
    }
  },
  series: [

    {
      name: 'Alphabets',
      type: 'treemap',
      layoutAlgorithm: 'squarified',
      data: _Alphabets,
     
    }, {
      name: 'Fruits',
      type: 'treemap',
      layoutAlgorithm: 'squarified',
      data: _Fruits, visible: false
    }


  ],

  plotOptions: {
    treemap: {
      showInLegend: true,
      events: {
        legendItemClick: function() {
          this.chart.series.forEach((s) => s.setVisible());
          return false;
        }
      }
    }
  },
  title: {
    text: 'Highcharts Treemap'
  }
};

var chart = Highcharts.chart('container', options);

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/treemap.src.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

以下是Fiddle

Answer 1

颜色轴附带热图模块。我使用为图例保留的空间来生成颜色轴 - 默认图例项不会被渲染。

这里的工作是创建自定义HTML图例：

  chart: {
    events: {
      load: function() {
        var chart = this;

        // legend box
        var div = document.createElement('div');
        div.setAttribute('class', 'legend-box');
        document.getElementsByClassName('highcharts-container')[0].appendChild(div);

        // items
        var ul = document.createElement('ul');
        ul.setAttribute('class', 'item-list');
        div.appendChild(ul);

        this.series.forEach(function(s) {
          var li = document.createElement('li');

          li.innerHTML = s.name;
          li.setAttribute('class', 'menu-item');
          li.style.color = s.color;

          ul.appendChild(li);
          li.addEventListener('click', function() {
            chart.series.forEach((s) => s.setVisible());
          });
        });

      }
    }
  },

现场演示： http://jsfiddle.net/kkulig/uut2vrj8/

我在这里创建的图例仅用于示例目的 - 它需要一些调整（更改项目的样式，而相应的系列不可见，当图表的大小改变时更改图例的位置等。）。

带有HighChart的ColorAxis无法按预期使用不同的库集

1 个答案: