在sparkline条形图上添加图例和y轴值

I was working on sparklines bar graph. Until now I am able to draw a simple bar graph, here is the Jquery code:

我在研究火花线条形图。到目前为止，我可以绘制一个简单的条形图，以下是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

HTML

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

Please refer my code at JSFIDDLE .

请参考我在JSFIDDLE的代码。

Now I want to add legends name as well as value of y-axis on each of the bar as shown below.

现在我想在每个条上添加传奇名称和y轴的值，如下所示。

sun,mon,tue are legends and the value on white color at the top of the bars are y-axis value.

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

But I am not able to achieve it.

但是我做不到。

Any Help would be appreciated.

如有任何帮助，我们将不胜感激。

1 个解决方案

#1

The more I could do is pointing you to sparkline's FAQ:
http://omnipotent.net/jquery.sparkline/#s-faq

我能做的更多的事情是向您介绍sparkline的FAQ: http://omnipotent.net/jquery.sparkline/#s-faq

Frequently Asked Questions

常见问题

Why are there no axis labels/markers?

为什么没有轴标/标记?

Sparklines are intended to be small enough to fit alongside a line of text, to give a quick impression of a trend or pattern and thus don't have the paraphernalia of full sized charts. As of version 2.0 you can mouse over the sparklines to see the underlying data.

Sparklines的设计要求足够小，以便与一行文本相匹配，以便快速地对某个趋势或模式产生印象，这样就不会有完整大小的图表。从2.0版本开始，您可以在sparklines上单击以查看底层数据。