Как выделить одиночную строку в гистограмме с помощью Chartjs

На одной странице html у меня есть меню выбора (a, b, c, d) и гистограмма (строки a, b, c, d). Я хочу, чтобы выделить соответствующий бар в гистограмме, выбранный в меню выбора.Как выделить одиночную строку в гистограмме с помощью Chartjs

источник

2015-08-22 Steven Luo

По изюминкой вы имеете в виду сделать другой цвет, чем остальные? Если это так, вы можете сделать что-то вроде этого: http://stackoverflow.com/questions/25594478/different-color-for-each-bar-in-a-bar-chart-chartjs Это зависит от того, как вы создаете диаграмму , если вы поделились некоторым кодом, который был бы полезен. Но я бы соответствовал положениям ярлыков на графике с меню, а затем onclick, находил, какую позицию занимал элемент меню, когда он был нажат, а затем сделал цвет заливки на гистограмме в той же позиции. –

Вы можете прикрепить логику вашего OnChange обработчика

document.getElementById("mySelect").onchange = highlightBar.bind(document.getElementById("mySelect"));

, и если вы хотите назвать это программно (скажем, если у вас есть начальный набор значений)

document.getElementById("mySelect").onchange();

Вот логика выделяя бары. Обратите внимание, что вам нужно учитывать тот факт, что функциональность всплывающей подсказки также управляет цветами заливки и цветами штриха.

function highlightBar(s) { 
    // this clears off any tooltip highlights 
    myBarChart.update(); 
    myBarChart.activeElements = []; 

    // reset any coloring because of selection 
    myBarChart.datasets.forEach(function(dataset) { 
     dataset.bars.forEach(function (bar) { 
      if (bar.selected) { 
       bar.fillColor = bar.selected.fillColor; 
       bar.strokeColor = bar.selected.strokeColor; 
       delete bar.selected; 
      } 
     }) 
    }); 

    var index = myBarChart.scale.xLabels.indexOf(this.value); 
    myBarChart.datasets.forEach(function (dataset) { 
     var selectedBar = dataset.bars[index]; 

     // store the current values 
     selectedBar.selected = { 
      fillColor: selectedBar.fillColor, 
      strokeColor: selectedBar.strokeColor 
     } 

     // now set the color 
     selectedBar.fillColor = "red"; 
     selectedBar.strokeColor = "red"; 
    }); 

    myBarChart.update(); 
}

Однако, если у вас не включена поддержка всплывающих подсказок, это становится гораздо проще и вам не нужны некоторые из выше логики.

Fiddle - http://jsfiddle.net/39owabm0/

источник

2015-08-23 08:12:37 potatopeelings

Как выделить одиночную строку в гистограмме с помощью Chartjs

ответ

Смежные вопросы