jQuery sparklines установить цвет отдельной панели

Question

Я использую jquery Sparklines, чтобы сделать милые маленькие гистограммы, но я хочу только покрасить последние бар другого цвета. Ниже приведен код, но было бы неплохо, если бы я мог покрасить столбцы именами всплывающих подсказок, а не значениями.

Есть ли способ сделать это?

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}}\">&#9679;</span> {{offset:names}} ({{value}})", 
 
    tooltipValueLookups: { 
 
    names: dates 
 
    }, 
 
    colorMap: ["blue", "blue", "blue", "blue", "blue", "blue", "red"] 
 
});

.jqstooltip { 
 
    border: none !important; 
 
    box-sizing: content-box; 
 
}

<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>

EDIT: никогда не может получить фрагменты кода для работы. Heres a fiddle.js: http://jsfiddle.net/wm98qfdb/

Answer 1

Попробуйте этот фрагмент, я плохо вставляю код, так что ... здесь ничего не происходит. Я не выполнил его, но вы можете использовать случай заявление в для цикла, чтобы заполнить массив имен, так что «Белка» всегда зеленый и т.д ...

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}}\">&#9679;</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>