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

标签 jquery plot sparklines

我正在研究 sparklines bar graph 。到目前为止,我已经能够绘制一个简单的条形图,这是 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 轴值,如下所示。

enter image description here

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

但我无法实现它。

任何帮助将不胜感激。

最佳答案

我能做的就是向您指出 Sparkline 的常见问题解答:
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.

关于jquery - 在迷你图条形图上添加图例和 y 轴值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17781125/

相关文章:

r - 将标签添加到数据表中的迷你图

javascript - 在树 jqgrid 中显示 Sparkine

javascript - D3 图表 : how to obtain x, 双击事件的 y 值

javascript - MVC - 根据下拉列表显示或隐藏 (div) 字段

plot - gnuplot 中 'plot' 命令中的“if”语句

plot - 平滑密度图 Mathematica

javascript - 使用 Dropbox 的 zxcvbn 密码强度估计器

jquery - 防止一个 jQuery 事件与另一个事件发生

python - 在 Matplotlib 中如何防止图像出现在屏幕上? Python

sparklines - Jquery 迷你图 : Possible to have different tooltips?