单击时更改点颜色
change point color on click
是否可以更改Flotr2中点(线性图)的填充颜色?
我的代码:
<script>
/* globals*/
var lineColor = '#717171';
var baseLineColor = '#a3d06e';
var titleText = []; /* [title1, title2,...] */
var xticks = []; /* [ [0.9, ""], [1, "strValue1"], ..., [n, strValueN], [n+0.1, ""] ] */
var title = document.getElementById('title');
var data = [ /* the chart data */
[1, 2],
[2, 3],
[3, 3],
[4, 4],
[5, 5],
[6, 5],
[7, 5],
[8, 2],
[9, 3],
[10, 3],
[11, 4],
[12, 5],
[13, 5],
[14, 5],
[15, 5],
[16, 2],
[17, 3],
[18, 3],
[19, 4],
[20, 5],
[21, 5],
[22, 5],
[23, 2],
[24, 3],
[25, 3],
[26, 4],
[27, 5],
[28, 5],
[29, 5],
[30, 5],
];
var container = document.getElementById('chart');
/*Test - remove for real data*/
for(var i=1; i<31; i++){
xticks.push([i, ("label " + i)]);
titleText[i] = "Title " + i;
}
/* chart options */
var personal = { data : data, /* @data@ */
lines : { show : true, fill : false, color: lineColor, lineWidth: 4},
points : { show : true, color: lineColor, radius: 20, fillColor:'#ff0000'}
};
var baseline = { data: [[-50,3],[50,3]],
mouse: {track: false},
lines : { show : true, fill : false, color: baseLineColor, lineWidth: 4}
}
setTimeout(setDimentions, 300);
function setDimentions(){
var w = window.innerWidth * 0.8;
var h = window.innerWidth * 0.45;
container.style.width = w + "px";
container.style.height = h + "px";
drawChart();
}
function drawChart(){
var f = Flotr.draw(container, [baseline, personal],
{
resolution: 2, HtmlText: true,
xaxis : { ticks: xticks /* @xticks@ */, tickDecimals: true, min:0.8, max: (data.length+0.2)/*@xmax@*/ },
yaxis : { ticks: [1,2,3,4,5], tickDecimals: true, min:0.9, max: 5.1 },
mouse : { track : true, sensibility: 10, trackFormatter: showTitle}
});
}
function showTitle(point){
title.innerHTML = titleText[parseInt(point.x)];
}
使用以下选项就足够了:
mouse : {
track : true,
relative : true,
lineColor : '#FF00FF',
fillColor : '#0000FF'
},
我在这里放了一个演示:http://jsfiddle.net/93by5/1/
相关文章:
- Javascript对象类在单击时打开窗口进行颜色选择,并在更改时替换对象背景颜色
- 使用Angular单击时更改特定图示符图标的颜色
- 单击时将文本的颜色更改为随机颜色(按钮)
- 如何在鼠标单击时更改KML多边形的颜色
- 单击ng更改列表项的活动bg颜色
- 将上次单击的按钮和访问过的按钮(未访问过的)的颜色分开
- 如何在单击按钮时更改整行的颜色
- 使用 jQuery 单击链接时更改链接背景颜色
- 通过右键单击更改完整日历中事件的背景颜色 - 不起作用
- 尝试在单击时使用Jquery更改html的背景颜色
- Adobe Acrobat X疑难解答下拉列表颜色选择.需要单击选择
- 单击按钮更改颜色/清除画布时画布出现问题
- 单击时更改点颜色
- 每次单击按钮时随机选择颜色
- 单击时更改元素的颜色
- 当再次单击时,我希望颜色消失.(喜欢/讨厌按钮,一切都可以,但如果我点击两次喜欢按钮,我希望颜色消失)
- Jquery单击颜色
- 单击时更改行颜色-ASP.NET和JavaScript
- 在Rails中,如何通过单击其中一个页面上的按钮来更改三个独立页面上边框的颜色
- 在 Java 脚本中更改颜色单击列表器