Here is my problem, i have a scale of colors for different countries. When I select a country, its color change and I don't want to.
I just want to use the stroke attribute (without the fill attribute) to display selected regions.
Problem is that the default color for fill is "yellow". I tried to set the fill attribute for selected region to "none" but it erases my current color when selected.
Have you guys a way to solve this issue?
$('#worldMap').vectorMap({
map: 'world_mill_en',
series: {
regions: [{
scale: ['#C1E712', '#5F7209'],
values: countryHitCounts,
}]
},
regionStyle: {
selected: {
fill: <= is there a keyword to not change the color when selected??
stroke: 'red',
"stroke-width": 1,
},
},
regionsSelectable: true,
selectedRegions: countrySelected,
onRegionSelected: function (event, code, isSelected, selectedRegions) {
//some code...
},
});
EDIT: in the minify js code source file, I changed the default style for selected region.
selected:{fill:"yellow"} by selected:{}
It works but if you have a better solution without changing the source file, I take it.
I ran into the same problem as well, what seemed to work for me was to override the selected fill with an invalid hex code. ex:
regionStyle: {
selected: {
fill: '#Z34FF9'
}
},
This seemed to register it as an override, but not actually apply it, leaving my original color.
You juste have to prevent the default action of the click :
,
onRegionClick: function(event, code){
event.preventDefault();
// your "some code" of region selected
}
Norrec's answer did not work for me, but I can override the class defaults just before creating the map. No source modification needed!
jvm.Map.defaultParams.regionStyle.selected = {};
map = new jvm.Map({
map: 'world_mill',
container: jQuery('#world-map'),
regionStyle: {
initial: {
fill: "#F6F6F6",
},
selected: {
stroke: '#FF00FF',
"stroke-width": 0.5,
}
},
}
Related
I have a problem with cell style in pivot mode: all mode such as row group and simple grid work well, but when I change to pivot mode just row style works and the cell style is not working.
See the link below
https://plnkr.co/edit/8AFyzB5XvqlQg51Q
I use this code in colDef
cellStyle: {color: 'red', 'background-color': 'green'}
and getRowStyle in gridOptions
var gridOptions = {
getRowStyle : function(params) {
if (params.node.rowIndex % 2 === 0) {
return { background: 'blue' };
}
}
}
Please guide me.
well coldef in AG-grid refers a simple column but the moment you perform grouping and pivoting its no longer a simple column it becomes a groupcolumn and if its autogroupcolomn then ag grid generates it. so if you want to apply styles to row group in grouped or pivot mode then you have to define it like this.
autoGroupColumnDef: {
width: 180,
cellStyle: function(params) {
//check that the autogroup is built using country column and then color every odd cell
if(params.node.field ==='country' && params.node.rowIndex% 2 === 1){
return {color: 'red', 'background-color': 'white'}
}
}
},
check out this fiddle to see the working demo
In Chart.js I am unable to set a color for the tooltip.I want to color the label "December 2016" as same as the color of the legend (Blue).
Please see below;
graphOptions.tooltips = {
enabled: true,
mode: 'single',
displayColors: false,
callbacks: {
title: function (tooltipItem, data) {
if (tooltipItem.length > 0) {
return tooltipItem[0].xLabel + ': ' + tooltipItem[0].yLabel +" Scans";
}
return "";
},
label: function (tooltipItem, data) {
if (data.datasets.length > 0) {
return data.datasets[tooltipItem.datasetIndex].label;
}
return '';
},
labelColor: function (tooltipItem, chartInstace) {
if (data.length > 0) {
return data[tooltipItem.datasetIndex].backgroundColor;
}
}
}
};
You haven't defined anything called data in the labelColor callback function. Another confusion with this callback in charts.js, is the second parameter passed to the labelColor callback function is the chart instance, and not the datasets like some of the other chartjs callbacks.
Anyway, this should work.
labelColor: function(tooltipItem, chart) {
var dataset = chart.config.data.datasets[tooltipItem.datasetIndex];
return {
backgroundColor : dataset.backgroundColor
}
}
You might want to try with labelTextColor instead of labelColor
This is a feature available since Chartjs 2.7
https://github.com/chartjs/Chart.js/releases/tag/v2.7.0
(Feature #4199)
labelTextColor: function(tooltipItem, chart) {
if (chart.tooltip._data.datasets[tooltipItem.datasetIndex].label === "amount")
{
return "#1ff368";
}
if (chart.tooltip._data.datasets[tooltipItem.datasetIndex].label ==="transactions") {
return "#8577ec";
}
}
just type your chart label like "amount" and then modify your colors in hand
Actually, the problem is that in labelColor callback you returning the backgroundColor. Below is the right return type of above callback method.
function (tooltipItem, chartInstance) {
return {
borderColor: borderColor,
backgroundColor: backgroundColor
};
}
In backgroungColor assign the color for the label. and you can leave the borderColor.
[Sample-Code]
labelColor : function(tooltipItem, chartInstance){
return {
backgroundColor : data.datasets[tooltipItem.datasetIndex].backgroundColor[0]
};
}
Actually, if your dataset color is just an item and not an array this you shall not need an extra tooltip callback eg.
Single color intepreted as the one shown in the tooltip automatically
const myDataset = {
label: 'My dataset',
data: [1,2.3,4,-5],
fill: true,
// this will show the tooltip with red color
backgroundColor: '#e23944',
borderColor: 'blue'
}
instead of
Array of colors not intepreted as the one shown in the tooltip
const myDataset = {
label: 'My dataset',
data: [1,2.3,4,-5],
fill: true,
// need to remove the array of color here
backgroundColor: ['#e23944'],
borderColor: ['blue']
}
According to the screenshot, you have only one dataset matching one color, so you don't need to put the colors as an array. If you need to set multiples points within the same dataset using different colors, then you shall use
Array of colors distributed to each data points
const myDataset = {
label: 'My dataset',
data: [1,2.3,4,-5],
fill: true,
// need to remove the array of color here
backgroundColor: ['#e23944', '#D4E157', '#26A69A', '#758BE2'],
borderColor: ['blue', 'green', 'white', 'dark']
}
But then you shall forgot this solution ^^ and adopt the one given above ;)
PS :For border and background colors you can use hexa, rbg or string notations.
Hope it helps :)
'tooltipItem' doesn't exists, misspelling the final 's'. So, your code should be
labelColor : function(tooltipItem, chartInstance){
return {
backgroundColor : data.datasets[tooltipItems.datasetIndex].backgroundColor[0]
};
}
I need to be able to set the fontFamily for an entire IText object even if it has character specific styling (code example and jsfiddle below). Note, when changing the fontFamily the character-specific styles don't change. Is there a way for me to access and clear those styles and then apply the style to the entire set of characters?
http://jsfiddle.net/xmfw65qg/48/
var iTextSample = new fabric.IText('hello\nworld', {
styles: {
0: {
0: { textDecoration: 'underline', fontSize: 80 },
1: { textBackgroundColor: 'red' }
},
1: {
0: { textBackgroundColor: 'rgba(0,255,0,0.5)' },
4: { fontSize: 20 }
}
}
});
2020 May Edit
In later revisions of fabricJS, the method removeStyle(props) has been added.
That means you can do:
myTextObject.removeStyle('fontFamily');
to clean it up.
You also have:
myTextObject.cleanStyle('fontFamily');
That will instead remove all the fontaFamily properties that are duplicated of the main object. So that the style object is reduced in complexity if possible.
Original answer
http://jsfiddle.net/asturur/xmfw65qg/50/
you have to manually iterate the style object and clear the fontFamily property.
function setFont(name, value) {
var object = canvas.item(0);
if (!object) return;
if (object.styles) {
var styles = object.styles;
for (var row in styles) {
for (var char in styles[row]) {
if ('fontFamily' in styles[row][char]) {
delete styles[row][char]['fontFamily'];
}
}
}
}
object.set(name, value).setCoords();
canvas.renderAll();
}
why this is necessary is another matter.
I would open an issue on the github repository for that.
Edit:
As fabricjs released 1.6.2 a small bug that was causing the original style object to be changed during rendering, has been fixed.
I have added a common Surface and a Scrollview (actually a FlexScrollView) to a SequentialLayout and then added the layout to my View as the following code shows:
function _createCameraView() {
var layoutViews = [];
this.cameraView = new View({
size: [undefined, this.options.footerSize]
});
var layout = new SequentialLayout({
size: [undefined, this.options.footerSize],
direction: Utility.Direction.Y
});
var backgroundSurface = new Surface({
size: [undefined, 120],
content: 'some content',
classes : ['photo-guide-content'],
properties: {
backgroundColor: 'transparent',
zIndex: 4
}
});
// detail list
var detailsList = new FlexScrollView({
layout: ListLayout,
direction: Utility.Direction.X, // set direction to horizontal
paginated: true,
//autoPipeEvents: true,
useContainer: true,
container : {
size: [undefined, 60],
properties : {
'z-index' : 5,
}
}
});
layoutViews.push(backgroundSurface);
layoutViews.push(detailsList);
layout.sequenceFrom(layoutViews);
this.cameraView.add(alignModifier).add(layout);
}
Then I've added a RenderController on another view and I'm using it to display my cameraView like this:
function _selectCamera() {
if (!this.cameraView) {
_createCameraView.call(this);
}
this.footerRender.hide(this.mapView);
this.footerRender.show(this.cameraView);
}
I know I don't need to call the hide method from the render on the function above, just the show method and it should swap the views with a smooth opacity transition, which is defined by default. Although when using this Sequential Layout I'm not getting this effect. I know it has to do with this layout because I've tried to switch the layout to a FlexibleLayout and a GridLayout, and it works fine with these two. So, my question is, why doesn't work with the SequentialLayout? I've also noticed it has a method called setOutputFunction(outputFunction), is there a way to use it so the layout uses the opacity returned from the RenderController or how can it be fixed some other way?
Try adding a getSize method to your view.
Something like this:
this.cameraView.getSize = function() {
return [undefined, undefined];
};
I have a table pre-populated with the company LAN IP addresses with fields for associated data, status, etc. The (jquery-)jtable fields collection is configured like this.
fields: {
id: { title: 'ID'},
ip: { title: 'IP address, edit: false }
more: { ... }
}
This works but the problem is that when the edit dialog pops up the user can't see the ip address of the record being edited as jtable's edit form doesn't show the field.
I've read through the documentation but can't see any way to display a field as read-only in the edit form. Any ideas?
You don't need to hack the jTable library asset, this just leads to pains when you want to update to a later version. All you need to do is create a custom input via the jTable field option "input", see an example field setup to accomplish what you need here:
JobId: {
title: 'JobId',
create: true,
edit: true,
list: true,
input: function (data) {
if (data.value) {
return '<input type="text" readonly class="jtable-input-readonly" name="JobId" value="' + data.value + '"/>';
} else {
//nothing to worry about here for your situation, data.value is undefined so the else is for the create/add new record user interaction, create is false for your usage so this else is not needed but shown just so you know when it would be entered
}
},
width: '5%',
visibility: 'hidden'
},
And simple style class:
.jtable-input-readonly{
background-color:lightgray;
}
I have simple solution:
formCreated: function (event, data)
{
if(data.formType=='edit') {
$('#Edit-ip').prop('readonly', true);
$('#Edit-ip').addClass('jtable-input-readonly');
}
},
For dropdown make other options disabled except the current one:
$('#Edit-country option:not(:selected)').attr('disabled', true);
And simple style class:
.jtable-input-readonly{
background-color:lightgray;
}
I had to hack jtable.js. Start around line 2427. Changed lines are marked with '*'.
//Do not create element for non-editable fields
if (field.edit == false) {
//Label hack part 1: Unless 'hidden' we want to show fields even though they can't be edited. Disable the 'continue'.
* //continue;
}
//Hidden field
if (field.type == 'hidden') {
$editForm.append(self._createInputForHidden(fieldName, fieldValue));
continue;
}
//Create a container div for this input field and add to form
var $fieldContainer = $('<div class="jtable-input-field-container"></div>').appendTo($editForm);
//Create a label for input
$fieldContainer.append(self._createInputLabelForRecordField(fieldName));
//Label hack part 2: Create a label containing the field value.
* if (field.edit == false) {
* $fieldContainer.append(self._myCreateLabelWithText(fieldValue));
* continue; //Label hack: Unless 'hidden' we want to show fields even though they can't be edited.
* }
//Create input element with it's current value
After _createInputLabelForRecordField add in this function (around line 1430):
/* Hack part 3: Creates label containing non-editable field value.
*************************************************************************/
_myCreateLabelWithText: function (txt) {
return $('<div />')
.addClass('jtable-input-label')
.html(txt);
},
With the Metro theme both the field name and value will be grey colour.
Be careful with your update script that you're passing back to. No value will be passed back for the //edit: false// fields so don't include them in your update query.
A more simple version for dropdowns
$('#Edit-country').prop('disabled',true);
No need to disable all the options :)