没有找到合适的产品?
联系客服协助选型:023-68661681
提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
翻译|使用教程|编辑:杨鹏连|2020-07-21 11:47:47.970|阅读 760 次
概述:了解如何创建一个交互式条形图与Highcharts比赛。
# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>
相关链接:
Highcharts是一款纯JavaScript编写的图表库,为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

您听说过条形图比赛吗?没有?嗯,这不是数据科学家的棋盘游戏,但实际上是一种通过动画以条形图格式显示时间序列的有用方法。
这是一个示例,下面我们将展示如何创建此图表。

借助dataSorting功能,使用Highcharts库创建条形图竞赛非常容易和直接。在本教程中,我们将向您展示如何创建世界人口条形图竞赛。
让我们开始吧!
本教程中使用的数据是1960年至2018年的世界人口。这是此演示中使用的数据的链接。现在,我们有了数据;让我们做一个处理特定年份数据的函数。
/**
* Calculate the data output
*/
function getData(year) {
let output = initialData.map(data => {
return [data["Country Name"], data[year]]
}).sort((a, b) => b[1] - a[1]);
return ([output[0], output.slice(1, 11)]);
}
该演示中的第一个结果显示了与1960年有关的数据:
@import "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css";
#parentContainer {
min-width: 400px;
max-width: 800px;
}
#play-controls {
position: absolute;
left: 100px;
top: 350px;
}
#play-pause-button {
width: 30px;
height: 30px;
cursor: pointer;
border: 1px solid silver;
border-radius: 3px;
background: #f8f8f8;
}
#play-range {
transform: translateY(2.5px);
}
我们将在窗口调整大小后添加此功能以适应范围宽度:
events: {
render() {
let chart = this;
// Responsive input
input.style.width = chart.plotWidth - chart.legend.legendWidth + 'px'
}
},
先前更改的结果在此演示中:
/**
* Update the chart. This happens either on updating (moving) the range input,
* or from a timer when the timeline is playing.
*/
function update(increment) {
if (increment) {
input.value = parseInt(input.value) + increment;
}
if (input.value >= endYear) { // Auto-pause
pause(btn);
}
chart.update({
title: {
useHTML: true,
text: `
World population - overall: ${getData(input.value)[0][1]}
`: `
World population - overall: ${getData(input.value)[0][1]}
`
},},
}, false, false, false)}, false, false, false)
chart.series[0].update({.series[0].update({
name: input.value,: input.value,
data: getData(input.value)[1]: getData(input.value)[1]
})})
}}
在这里,我们将上面的功能链接到按钮元素:
/**
* Play the timeline.
*/
function play(button) {function play(button) {
button.title = 'pause';.title = 'pause';
button.className = 'fa fa-pause';.className = 'fa fa-pause';
chart.sequenceTimer = setInterval(function() {.sequenceTimer = setInterval(function() {
update(1);(1);
}, 500);}, 500);
}}
/** /**
* Pause the timeline, either when the range is ended, or when clicking the pause button.
* Pausing stops the timer and resets the button to play mode.
*/
function pause(button) {function pause(button) {
button.title = 'play';.title = 'play';
button.className = 'fa fa-play';.className = 'fa fa-play';
clearTimeout(chart.sequenceTimer);(chart.sequenceTimer);
chart.sequenceTimer = undefined;.sequenceTimer = undefined;
}}
btn.addEventListener('click', function() {.addEventListener('click', function() {
if (chart.sequenceTimer) {if (chart.sequenceTimer) {
pause(this)(this)
} else {} else {
play(this)(this)
}}
})})
/** /**
* Trigger the update on the range bar click.
*/
input.addEventListener('click', function() {.addEventListener('click', function() {
update()()
})})
现在,我们有一个完全正常工作的种族条形图:
/**
* Animate dataLabels functionality
*/
(function(H) {(function(H) {
const FLOAT = /^-?\d+\.?\d*$/;const FLOAT = /^-?\d+\.?\d*$/;
// Add animated textSetter, just like fill/strokeSetters// Add animated textSetter, just like fill/strokeSetters
H.Fx.prototype.textSetter = function(proceed) {.Fx.prototype.textSetter = function(proceed) {
var startValue = this.start.replace(/ /g, ''),var startValue = this.start.replace(/ /g, ''),
endValue = this.end.replace(/ /g, ''),= this.end.replace(/ /g, ''),
currentValue = this.end.replace(/ /g, '');= this.end.replace(/ /g, '');
if ((startValue || '').match(FLOAT)) {if ((startValue || '').match(FLOAT)) {
startValue = parseInt(startValue, 10);= parseInt(startValue, 10);
endValue = parseInt(endValue, 10);
// No support for float
currentValue = Highcharts.numberFormat(
Math.round(startValue + (endValue - startValue) * this.pos), 0);
}
this.elem.endText = this.end;
this.elem.attr(
this.prop,
currentValue,
null,
true
);
};
// Add textGetter, not supported at all at this moment:
H.SVGElement.prototype.textGetter = function(hash, elem) {
var ct = this.text.element.textContent || '';
return this.endText ? this.endText : ct.substring(0, ct.length / 2);
}
// Temporary change label.attr() with label.animate():
// In core it's simple change attr(...) => animate(...) for text prop
H.wrap(H.Series.prototype, 'drawDataLabels', function(proceed) {
var ret,
attr = H.SVGElement.prototype.attr,
chart = this.chart;
if (chart.sequenceTimer) {
this.points.forEach(
point => (point.dataLabels || []).forEach(
label => label.attr = function(hash, val) {
if (hash && hash.text !== undefined) {
var text = hash.text;
delete hash.text;
this.attr(hash);
this.animate({
text: text
});
return this;
} else {
return attr.apply(this, arguments);
}
}
)
);
}
ret = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
this.points.forEach(
p => (p.dataLabels || []).forEach(d => d.attr = attr)
);
return ret;
});
})(Highcharts);
最终结果在下面的演示中:
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@ke049m.cn
文章转载自:Highsoft



在使用Parasoft C/C++test执行BugDetective数据流分析时,可能会遇到用户自定义的资源API,那在这种情况下,若要判断是否存在资源问题,如资源泄露等,则需要手动配置测试配置。
大型SaaS系统的自动化测试常常受制于界面变化快、结构复杂、加载机制多变等因素。从元素识别到脚本管理,SmartBear TestComplete帮助Salesforce建了可靠的自动化测试体系。
BarTender 标签管理系统,正是帮助企业轻松实现 GS1 标准化标签设计、编码生成与信息联动的强大工具。
Parasoft C/C++test 是一款功能强大的 C/C++ 软件测试工具,集成了静态代码分析、单元测试、集成测试和覆盖率分析等功能,单元测试作为其关键功能之一,为了适配多样化的目标部署环境,C/C++test 设计了灵活的测试结果收集机制。通过Socket通讯方式来收集单元测试结果,从而扩展其测试覆盖范围与应用场景。
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@ke049m.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢
半岛外围网上直营 