Спарклайны jQuery задают цвет отдельного бара

Я использую 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>

РЕДАКТИРОВАТЬ: никогда не получится заставить работать фрагменты кода. Вот fiddle.js: http://jsfiddle.net/wm98qfdb/


jquery bar-chart sparklines
person ChiMo    schedule 20.05.2015    source источник
comment
Вопрос заключался в том, как раскрасить столбцы по имени. Итак, если у меня есть полоска с названием «Белки», как я могу покрасить ее в зеленый цвет?   -  person ChiMo    schedule 20.05.2015

Ответы (1)


arrow_upward
2
arrow_downward

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

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>
person omikes    schedule 20.05.2015
comment
Я не знаю, почему мне это не пришло в голову, я мог бы просто узнать, какой элемент массива является последним значением, и повторить цвет по умолчанию до указанного индекса. ДОХ! - person ChiMo; 20.05.2015