最近学习使用echarts画堆叠条形图时 发现使用time类型条形从原点开始

echarts版本 4.6.0

学习样本：https://gallery.echartsjs.com/editor.html?c=xryzwi7fVl

在本地显示结果：



我的解决方案（未根本解决从原点出发问题）

将隐藏线做为覆盖


series: [ {
        name: '投入',
        type: 'bar',
        stack: '总量',
        itemStyle: {
            normal: {
                label: {
                    color: "black"
                }
            }
        },
        label: {
            normal: {
                show: true,
                position: 'insideRight'
            }
        },
        data: data.map(item => item.end)
    },{
        name: '投入隐藏线',
        type: 'bar',
        stack: '总量',
        itemStyle: {
            normal: {
                label: {
                    color: "black"
                },
                color: 'white'
            }
        },
        label: {
            normal: {
                show: true,
                position: 'right'
            }
        },
        data: data.map(item => item.start)
    },
			]
			
			

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年有关的数据：



下一步是向图表添加动画。为此，我们需要添加以下HTML元素：播放/停止按钮和用于交互式进度栏的

元素type=”range”。我们还必须添加样式效果！（请参见下面的CSS）：

@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'

}

},

先前更改的结果在此演示中：


到目前为止，我们有一个按钮和一个范围栏元素，让我们创建按钮的功能以使用该series.update功能更新图表：
/**

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+.?\dKaTeX parse error: Undefined control sequence: \d at position 21: …st 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正版授权，或了解更多产品信息请点击【慧都】

条形图是数据可视化图形中很基础也很常用的一种图，简单解释下：条形图也叫长条图(英语：bar chart)，亦称条图(英语：bar graph)、条状图、棒形图、柱状图、条形图表，是一种以长方形的长度为变量的统计图表。长条图用来比较两个或以上的价值(不同时间或者不同条件)，只有一个变量，通常利用于较小的数据集分析。长条图亦可横向排列，或用多维方式表达。
那么一个普通的条形图是长什么样子的呢？
当！当！当！就是下图的这个样子：
​ 图先亮出来啦，接下来研究这个图是怎么画的吧，先看一下原数据长什么样子：
​ 实际画图的流程和画折线图很相近，只是用到的画图函数不一样，绘制条形图的函数plt.bar()：
​ 由于这只是最简单的一个条形图，实际上条形图的函数plt.bar()还有不少可以探索的参数设置，和对折线图函数plt.plot()的探索差不多，有兴趣的孩子可以自己去进行探索哦。
按照条形长短进行排序展示的条形图
​ 当然也可以有其他的设置，比如说上图中的线条高低参差不齐，这是因为x轴的数据是按照学校名称进行排序的，那么可不可以按照分数的高低进行排序呢？也就是让所有的长方形按照从高到矮或者从矮到高的顺序进行排列？
​ 当然可以啦！这里需要强调的是，条的高低排列等信息都是来源于原数据的，要想让条形的顺序发生改变，需要对画图的来源数据进行更改呢！
​ 把原数据逆序排序后截取前十名数据赋值给data_yuwen，作为新的数据源传入画图函数plt.bar()，画出来的图自然就不一样了。
​ 先看一眼数据长什么样子：
​ 根据这个数据源绘制出的图形如下，由于用来画图的数据进行了降序排序操作，所以生成条形图的条也会进行降序排序展示：
​ 很多时候，我们常见的条形图还有另一种展现形式，那就是横向的条形图，比较火的那种动态条形图绝大多数也都是横向的条形图，那么横向的条形图如何绘制呢？
理解plt.bar()主要参数
​ 其实也不难，只要清楚plt.bar()函数中主要参数的作用就可以了！条形图函数中有五个主要参数，分别是x，height，width，bottom，orientation。其中x控制的是每个条在x轴上位置，height控制的是每个条的长度，width控制的是每个条的宽度，bottom控制的是每个条在y轴方向的起始位置，orientation控制的是条形的方向，是纵向还是横向，默认是纵向的。
​ 通过一个小例子理解下这几个参数的作用：
​ 上边的几行代码输出的图形如下：
​ 对比着代码和实际输出的条形图，各个主要参数的作用是不是一目了然啦？
横向条形图
理解了这几个参数作用后，纵向的条形图转换成横向的条形图就没什么难度了！
需要设置所有条形在x轴的位置都为0，也就全部从最左侧开始画条形;
由于是横向条形图，所以实际上条的宽度显示的是数据大小，将width参数设置成原数据中的语文成绩；
bottom控制每个条在y轴方向的起始位置，设置bottom=range(10)设置每个条形在y轴的起始位置各不相同避免有条形重叠；
height控制的是每个条在y轴方向上的长度，条形图横向设置后，在y轴上的长度失去了衡量数据的意义，所以直接设置一个常数即可；
最后设置条形的方向为横向，即orientation=“horizontal”。
温馨提示：数据和标签一定要匹配，即plt.bar()重点的数据要和plt.yticks()中提取出来的标签一一对应，一旦不匹配，整个图展现的结果就是一个错误的结果！
上述代码生成的条形图如下：
​ 感觉上边这种生成横向条形图的方式有点点绕，和人们的习惯认知有点不大一样，难道画一个横向条形图就非得转变自己的习惯认知这么反人类吗？
​ 当然不是的，实际上有更简单的方法绘制一个横向条形图，之所以没有一开始就直接用这种简单的方法，也是为了让大家体会下条形图参数的灵活设置而已，而且如果比较绕的方法都能理解了，简单的方法理解和运用起来就更没有难度了啊！
​ 不卖关子了，我们来认识下和plt.bar()函数类似的plt.barh()函数。
​ plt.barh()函数是专门绘制水平条形图的函数，主要的参数有：
y 控制y轴显示的标签来源
width 控制横向条形的长度，即用来进行对比的数据源
height 条形的宽度需要设置的参数主要就是这三个，比用plt.bar()函数绘制水平条形图简单了很多，具体代码如下：
效果图：
​ 和用plt.bar()函数绘制的横向条形图一毛一样对不对？以后有需求绘制横向条形图，尽量用plt.barh()函数吧，毕竟它是专门绘制这种类型图的，简单好用。
​ 然而实际工作中对于条形图的需求不只是这些，比如例子中只是对各个学校语文成绩的展示，有时候需要各个学科的成绩同时展现在一幅条形图中，有时候也需要绘制堆积条形图对各学科的成绩以及总成绩进行展示，这些图又该如何绘制呢？其实只要理解了各个参数的含义，绘制这些图也不在话下，至于具体怎么画，且看下回分解啊！

条形图是数据可视化图形中很基础也很常用的一种图，简单解释下：条形图也叫长条图（英语：bar chart），亦称条图（英语：bar graph）、条状图、棒形图、柱状图、条形图表，是一种以长方形的长度为变量的统计图表。长条图用来比较两个或以上的价值（不同时间或者不同条件），只有一个变量，通常利用于较小的数据集分析。长条图亦可横向排列，或用多维方式表达。
那么一个普通的条形图是长什么样子的呢？
当！当！当！就是下图的这个样子：
​ 图先亮出来啦，接下来研究这个图是怎么画的吧，先看一下原数据长什么样子：
​ 实际画图的流程和画折线图很相近，只是用到的画图函数不一样，绘制条形图的函数plt.bar（）：
​ 由于这只是最简单的一个条形图，实际上条形图的函数plt.bar（）还有不少可以探索的参数设置，和对折线图函数plt.plot()的探索差不多，有兴趣的孩子可以自己去进行探索哦。
按照条形长短进行排序展示的条形图
​ 当然也可以有其他的设置，比如说上图中的线条高低参差不齐，这是因为x轴的数据是按照学校名称进行排序的，那么可不可以按照分数的高低进行排序呢？也就是让所有的长方形按照从高到矮或者从矮到高的顺序进行排列？
​ 当然可以啦！这里需要强调的是，条的高低排列等信息都是来源于原数据的，要想让条形的顺序发生改变，需要对画图的来源数据进行更改呢！
​ 把原数据逆序排序后截取前十名数据赋值给data_yuwen，作为新的数据源传入画图函数plt.bar()，画出来的图自然就不一样了。
​ 先看一眼数据长什么样子：
​ 根据这个数据源绘制出的图形如下，由于用来画图的数据进行了降序排序操作，所以生成条形图的条也会进行降序排序展示：
​ 很多时候，我们常见的条形图还有另一种展现形式，那就是横向的条形图，比较火的那种动态条形图绝大多数也都是横向的条形图，那么横向的条形图如何绘制呢？
理解plt.bar()主要参数
​ 其实也不难，只要清楚plt.bar()函数中主要参数的作用就可以了！条形图函数中有五个主要参数，分别是x，height，width，bottom，orientation。其中x控制的是每个条在x轴上位置，height控制的是每个条的长度，width控制的是每个条的宽度，bottom控制的是每个条在y轴方向的起始位置，orientation控制的是条形的方向，是纵向还是横向，默认是纵向的。
​ 通过一个小例子理解下这几个参数的作用：
​ 上边的几行代码输出的图形如下：
​ 对比着代码和实际输出的条形图，各个主要参数的作用是不是一目了然啦？
横向条形图
理解了这几个参数作用后，纵向的条形图转换成横向的条形图就没什么难度了！
需要设置所有条形在x轴的位置都为0，也就全部从最左侧开始画条形;
由于是横向条形图，所以实际上条的宽度显示的是数据大小，将width参数设置成原数据中的语文成绩；
bottom控制每个条在y轴方向的起始位置，设置bottom=range（10）设置每个条形在y轴的起始位置各不相同避免有条形重叠；
height控制的是每个条在y轴方向上的长度，条形图横向设置后，在y轴上的长度失去了衡量数据的意义，所以直接设置一个常数即可；
最后设置条形的方向为横向，即orientation=“horizontal”。
温馨提示：数据和标签一定要匹配，即plt.bar()重点的数据要和plt.yticks()中提取出来的标签一一对应，一旦不匹配，整个图展现的结果就是一个错误的结果！

上述代码生成的条形图如下：
​ 感觉上边这种生成横向条形图的方式有点点绕，和人们的习惯认知有点不大一样，难道画一个横向条形图就非得转变自己的习惯认知这么反人类吗？
​ 当然不是的，实际上有更简单的方法绘制一个横向条形图，之所以没有一开始就直接用这种简单的方法，也是为了让大家体会下条形图参数的灵活设置而已，而且如果比较绕的方法都能理解了，简单的方法理解和运用起来就更没有难度了啊！
​ 不卖关子了，我们来认识下和plt.bar()函数类似的plt.barh()函数。
​ plt.barh()函数是专门绘制水平条形图的函数，主要的参数有：
y 控制y轴显示的标签来源
width 控制横向条形的长度，即用来进行对比的数据源
height 条形的宽度
需要设置的参数主要就是这三个，比用plt.bar()函数绘制水平条形图简单了很多，具体代码如下：

效果图：
​ 和用plt.bar()函数绘制的横向条形图一毛一样对不对？以后有需求绘制横向条形图，尽量用plt.barh()函数吧，毕竟它是专门绘制这种类型图的，简单好用。
​ 然而实际工作中对于条形图的需求不只是这些，比如例子中只是对各个学校语文成绩的展示，有时候需要各个学科的成绩同时展现在一幅条形图中，有时候也需要绘制堆积条形图对各学科的成绩以及总成绩进行展示，这些图又该如何绘制呢？其实只要理解了各个参数的含义，绘制这些图也不在话下，至于具体怎么画，且看下回分解啊！