开源图表库Highcharts教程：创建条形图竞赛显示时间序列

了解如何创建一个交互式条形图与Highcharts比赛。

Highcharts是一款纯JavaScript编写的图表库，为你的Web 站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

Highcharts最新试用版

您听说过条形图比赛吗有，这不是数据科学家的棋盘游戏，但实际上是一种通过动画以条形图格式显示时间序列的有用方法。

这是一个示例，下面我们将展示如何创建此图表。

借助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 "https://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);

最终结果在下面的演示中：

想要购买Highcharts正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：