HighChart的ColorAxis不能像预期的那样使用不同的库集 [英] ColorAxis with HighChart not working as expected with different set of library

查看：282
本文介绍了HighChart的ColorAxis不能像预期的那样使用不同的库集的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

首先设置 - 要使用的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'>更新< /按钮>

第一套图书馆的结果


$ b 常见HighChart - 使用不同的JavaScript文件集配置如下
：The以下几行代码为2套库生成图形。

  var options = {
 colorAxis：{
 minColor：'#FFFFFF'，
 maxColor：Highcharts.getOptions（）。colors [0]，
 labels：{
 style：{
 fontSize：'10px'， 
 fontFamily：'Arial'
} 
} 
}，
 series：[{
 type：'treemap'，
 layoutAlgorithm：' 'b $ b数据：[{
 name：'A'，
 value：6，
 colorValue：1 
}，{
 name：' B'，
值：6，
 colorVal ue：2 
}，{
名称：'C'，
值：4，
 colorValue：3 
}，{
 name：'D '，
值：3，
 colorValue：4 
}，{
名称：'E'，
值：2，
 colorValue：5 
}，{
名称：'F'，
值：2，
 colorValue：6 
}，{
名称：'G'，
 value：1，
 colorValue：7 
}] 
}]，
 title：{
 text：'Highcharts Treemap'
} 
}; 
 
 var chart = Highcharts.chart（'container'，options）; 
 $ b $（'＃update'）。click（function（）{
 chart.update（{
 chart：{
 style：{
 fontSize ：'20px'，
 fontFamily：'HelveticaNeue'
} 
} 
}）; 
 
 chart.colorAxis [0] .update（{
 minColor：'＃C9364F'，
 maxColor：'＃36C940'，
标签：{
 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'>更新< /按钮>

第二套图书馆的结果



下面的代码行为第二组库创建蓝色

  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'，值：4，颜色：'＃00FF7F'}，{名称：'D'，值：3，颜色：'＃90EE90'}，{名称：'E'，值：2，颜色：'＃8EBC8E'}， {name：'F'，value：2，color：'＃3CB371'}，{name：'G'，value：1，color：'＃2E8A57'}]; var _Fruits = [{name：'mango'，值：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'，max Color：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（））;返回false; }}}}，title：{text：'Highcharts Treemap'}}; var chart = Highcharts.chart（'container'，options）;   
 < script src =https：// code。 < / script>< / script& script src =http://code.highcharts.com/modules/exporting.js>< / script>< div id =container>< / div>



以下是小提琴

解决方案

strong>热图> 模块。我使用为图例预留的空间来生成颜色轴 - 默认图例项目不会呈现。



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

  chart：{
 events：{
 load：function（）{
 var图表=这个; 
 
 //图例框
 var div = document.createElement（'div'）; 
 div.setAttribute（'class'，'legend-box'）; 
 document.getElementsByClassName（'highcharts-container'）[0] .appendChild（div）; 
 
 //项目
 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（））; 
}）; 
} ）; 
 
 
 
 
 code $ $ p 
 
 
 现场演示：  http://jsfiddle.net/kkulig/uut2vrj8/  
 
 
 
我在这里创建的图例仅仅是为了举例 - 它需要一些调整（改变项目的风格，而相应的系列不可见，改变图例的位置图表大小变化等）。
 
First Set - JavaScript files to required be used are : My entire application uses the below js library for implementing graph across multiple pages and are configured differently based on conditions are report types, 
    <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>

Result from First Set of Library 




Common HighChart - configured as below with different set of JavaScript file
  : The following lines of codes are generating graph for 2 set of library.
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'
      }
    }
  });
});

**Second Set of JavaScript Files- ** Below are the 
<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> 

Result from Second Set of Library 




Below line of codes are creating shades of blue for second set of library
 colorAxis: {
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0],
    labels: {
      style: {
        fontSize: '10px',
        fontFamily: 'Arial'
      }
    }
  }

The above coloraxis parameter is not working for First Result. 
Is there different way for implementing color axis for first case.







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>









Following is the Fiddle
 解决方案 
Color axis comes with the heatmap module. I uses space reserved for the legend to genearate color axis - default legend items are not rendered.



The workarond here is to create custom HTML legend:
  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());
          });
        });

      }
    }
  },

Live demo: http://jsfiddle.net/kkulig/uut2vrj8/



The legend that I created here is just for example purposes - it needs some adjustments (changing item's style while corresponding series is not visible, changing the position of the legend when the size of the chart changes etc.).


                        
这篇关于HighChart的ColorAxis不能像预期的那样使用不同的库集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆