在迷你图条形图上添加图例和y轴值 [英] Adding legends and y-axis value on sparkline bar charts

问题描述

我正在制作 sparklines条形图 .到目前为止，我已经能够绘制一个简单的条形图，这是Jquery代码:

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

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 中引用我的代码.

Please refer my code at JSFIDDLE .

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

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.

但是我无法实现.

任何帮助将不胜感激.

推荐答案

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

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

常见问题

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

Why are there no axis labels/markers?

火花线的目的是要足够小，以适合于 文字，以快速显示趋势或样式，因此不要 具有完整尺寸图表的工具.从2.0版开始，您可以 将鼠标悬停在迷你图上以查看基础数据.

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.

这篇关于在迷你图条形图上添加图例和y轴值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！