提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
翻译|使用教程|编辑:杨鹏连|2020-07-21 11:47:47.970|阅读 674 次
概述:了解如何创建一个交互式条形图与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@pclwef.cn
文章转载自:Highsoft本文探讨 SQL Server 中 NULL 和空值之间的区别,并讨论如何有效地处理它们。
Unity 是一款功能极其丰富的游戏引擎,允许开发人员将各种媒体集成到他们的项目中。但是,它缺少最令人兴奋的功能之一 - 将 Web 内容(例如 HTML、CSS 和 JavaScript)直接渲染到 3D 场景中的纹理上的能力。在本文中,我们将介绍如何使用 DotNetBrowser 在 Unity3D 中将 Web 内容渲染为纹理。
DevExpress v24.2帮助文档正式发布上线了,请按版本按需下载~
本教程将向您展示如何用MyEclipse构建一个Web项目,欢迎下载最新版IDE体验!
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@pclwef.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢