我正在使用jquery Sparklines制作可爱的小条形图,但我想只为 last 条颜色添加不同的颜色。下面的代码可以工作,但如果我可以通过工具提示名称而不是值来为条形图上色,那将会很好。
有办法吗?
var values = [500, 400, 700, 900, 1200, 300, 550];
var dates = {};
var now = new Date();
var counter = 0;
for (var i = values.length - 1; i >= 0; i--) {
var d = moment(now).subtract(1 * i, "day").format("MMM DD");
dates[counter] = d;
counter++;
}
$("#bargraph1").sparkline(values, {
type: "bar",
barWidth: 20,
barSpacing: 3,
height: 100,
tooltipFormat: "<span style=\"color: {{color}}\">●</span> {{offset:names}} ({{value}})",
tooltipValueLookups: {
names: dates
},
colorMap: ["blue", "blue", "blue", "blue", "blue", "blue", "red"]
});
&#13;
.jqstooltip {
border: none !important;
box-sizing: content-box;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<span id="bargraph1"></span>
&#13;
编辑:永远无法让代码片段起作用。这是一个小提琴.js:http://jsfiddle.net/wm98qfdb/
答案 0 :(得分:2)
试试这个代码片段,我也不擅长粘贴代码,所以......这里什么都没有。我没有实现它,但您可以在for循环中使用case语句来填充一组名称,以便“松散”。永远是绿色等...
https://jsfiddle.net/omikey/y83dmusn/
.jqstooltip {
border:none !important;
box-sizing:content-box;
}
var values = [500, 400, 700, 900, 1200, 300, 550];
var dates = {};
var now = new Date();
var counter = 0;
for (var i = values.length - 1; i >= 0; i--) {
var d = moment(now).subtract(1 * i, "day").format("MMM DD");
dates[counter] = d;
counter++;
}
$("#bargraph1").sparkline(values, {
type: "bar",
barWidth: 20,
barSpacing: 3,
height: 100,
tooltipFormat: "<span style=\"color: {{color}}\">●</span> {{offset:names}} ({{value}})",
tooltipValueLookups: {
names: {
0: 'Squirrel',
1: 'Kitty',
2: 'Bird',
3: 'Three',
4: 'Four',
5: 'Five',
6: 'Six',
7: 'Seven'
// Add more here
}},
colorMap: ["green", "blue", "blue", "blue", "blue", "blue", "red"]
});
<span id="bargraph1"></span>