jquery - 在迷你图条形图上添加图例和 y 轴值

Question

我正在研究迷你图条形图。到目前为止，我能够绘制一个简单的条形图，这是 Jquery 代码：

values = [0,8, 15, 10, 50, 25, 35, 70];
$('.sparkline').sparkline(values, {
    type: 'bar',
    height: '200px',
    barWidth: 20,
    barSpacing: 10,
    barColor: '#56aaff',
    zeroColor: '#000000',
    enableTagOptions: true,
    tagValuesAttribute: 'data-values',
    colorMap: ["red", "green", "blue", "yellow", "orange", "#f2f2f2", "maroon", "pink"]

});

HTML

<p>
<span class="sparkline">Loading...</span>
</p>

请参考我在JSFIDDLE的代码。

现在我想在每个条形图上添加图例名称以及 y 轴的值，如下所示。

sun,mon,tue 是图例，条形顶部的白色值是 y 轴值。

但我无法实现它。

任何帮助，将不胜感激。

Answer 1

我能做的就是将您指向迷你图的常见问题解答：http:
//omnipotent.net/jquery.sparkline/#s-faq

经常问的问题

为什么没有轴标签/标记？

迷你图旨在足够小以适合一行文本，以便快速了解趋势或模式，因此没有全尺寸图表的用具。从 2.0 版开始，您可以将鼠标悬停在迷你图上以查看基础数据。