第一组 - 需要使用的 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>
以下是小提琴
色轴带有热图模块。我使用为图例保留的空间来生成颜色轴 - 不呈现默认图例项。
该workarond这里是创建自定义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/
我在此处创建的图例仅用于示例 - 它需要进行一些调整(在相应系列不可见时更改项目的样式,在图表大小发生变化时更改图例的位置等)。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句