I want to make a panel. The longitude and latitude of the selected elements and the rotation angle are displayed on the panel. I use the panel to adjust the position and angle of the elements. However, with the editor, the modified elements can only be updated after applyedits is applied. I hope I can see the modification process in real time. This problem has been bothering me for a long time, so I hope someone can give me some advice.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>
Thematic multivariate visualization (2D) | Sample | ArcGIS API for
JavaScript 4.22
</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
right: 20px;
}
#exit{
display: block;
position: absolute;
z-index: 2;
top: 50px;
right: 50px;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.22/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Legend",
"esri/Graphic",
"esri/widgets/Editor"
], (Map, MapView, FeatureLayer, Legend, Graphic, Editor) => {
const map = new Map({
basemap: {
portalItem: {
id: "ba223f982a3c4a0ea8c9953346e2a201"
}
},
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 14,
center: [-88, 41]
});
view.ui.add(
new Legend({
view: view
}),
"bottom-right"
);
let axisPng = 'axle.png';
////////////////////////// 实时编辑功能/////////////////////////////////////////////
let AxisPoint = [
{
type: "point",
longitude: 121.08058594084916,
latitude: 37.69302040429612,
symbolType: "picture-marker",
id: 1,
url: axisPng,
width: "24px",
height: "24px",
name: "gz1",
angle: "0",
},
{
type: "point",
longitude: 121.08058594084919,
latitude: 37.692905793166474,
symbolType: "picture-marker",
id: 2,
url: axisPng,
width: "24px",
height: "24px",
name: "gz2",
angle: "90",
},
{
type: "point",
longitude: 121.08058057642913,
latitude: 37.6927572229193,
symbolType: "picture-marker",
id: 3,
url: axisPng,
width: "24px",
height: "24px",
name: "gz3",
angle: "60",
},
{
type: "point",
longitude: 121.08058057642913,
latitude: 37.69306479108028,
symbolType: "picture-marker",
id: 4,
url: axisPng,
width: "24px",
height: "24px",
name: "gz4",
angle: "0",
},
{
type: "point",
longitude: 121.08058057642913,
latitude: 37.693038260757845,
symbolType: "picture-marker",
id: 5,
url: axisPng,
width: "24px",
height: "24px",
name: "gz5",
angle: "0",
},
{
type: "point",
longitude: 121.08058057642913,
latitude: 37.693038260757845,
symbolType: "picture-marker",
id: 6,
url: axisPng,
width: "24px",
height: "24px",
name: "gz6",
angle: "0",
},
{
type: "point",
longitude: 121.08058057642913,
latitude: 37.69308397577108,
symbolType: "picture-marker",
id: 7,
url: axisPng,
width: "24px",
height: "24px",
name: "gz7",
angle: "0",
},
{
type: "point",
longitude: 121.08058057642913,
latitude: 37.693098832743665,
symbolType: "picture-marker",
id: 8,
url: axisPng,
width: "24px",
height: "24px",
name: "gz8",
angle: "0",
},
{
type: "point",
longitude: 121.08058057642913,
latitude: 37.693123463156034,
symbolType: "picture-marker",
id: 9,
url: axisPng,
width: "24px",
height: "24px",
name: "gz9",
angle: "0",
},
];
let temporaryAxis = [];
AxisPoint.forEach((item) => {
const AxisProperties = {
Name: item.name,
Angle: item.angle,
id: item.id,
opacity: item.opacity,
gisRack: item.gisRack,
Size: item.scaleX,// 使用scaleX来代表xy同时缩放的比例，单独缩放暂未找到方法
...item
};
const axisGraphic = new Graphic({
geometry: item,
attributes: AxisProperties,
spatialReference: { wkid: 3857 },
});
//存储管轴图形
temporaryAxis.push(axisGraphic);
})
AxleLayer = new FeatureLayer({
title: "管轴图层",
id: "AxisLayer",
//图层资源
source: temporaryAxis,
objectIdField: "id",
//渲染器
renderer: {
// 简单渲染
type: "simple",
// 设置渲染的统一样式
symbol: {
type: "picture-marker",
width: "36px",
height: "36px",
url: axisPng,
// angle: "0"
},
// 根据属性字段中的angle字段的值，单独改动渲染的角度信息，实现角度旋转
visualVariables: [
{
type: "rotation",
field: "angle",
rotationType: "geographic",
},
],
},
fields: [
{
name: "Name",
type: "string",
},
{
name: "Angle",
type: "string",
},
{
name: "id",
type: "integer",
},
{
name: "opacity",
type: "string",
},
{
name: "gisRack",
type: "integer",
},
{
name: "Size",
type: "string",
}
],
//弹出模板
popupTemplate: {
overwriteActions: true,
title: "管轴基础信息",
content: [
{
type: "fields",
fieldInfos: [
{
fieldName: "Name",
label: "管轴名称",
},
{
fieldName: "Angle",
label: "旋转角度",
},
],
},
],
// TODO 在此筛选各图层的图元
},
});
map.add(AxleLayer, 1);
editor = new Editor({
//编辑器所在视图，
view: view,
visible: false,// 关闭编辑面板显示
supportingWidgetDefaults: {// 编辑器默认参数设置--方法1
sketch: {
defaultUpdateOptions: {
enableRotation: false,// 禁用旋转
tool: "reshape",// 默认开启重塑工具
enableScaling: false,// 禁用缩放
toggleToolOnClick: false// 禁用点击切换编辑工具
}
}
}
});
view.on("click", (e) => {
// 点击左键才弹窗
if (e.button === 0) {
view.hitTest(e).then((pickerfeature) => {
// 开启编辑
editor.startUpdateWorkflowAtFeatureEdit(pickerfeature.results[0].graphic);
});
}
// 点击中键
if(e.button === 1){
changePosition(editor, AxleLayer)
}
if(e.button === 2){
exitEdit(editor, AxleLayer)
}
});
function changePosition(editor, AxleLayer){
let getUpdateFeatures = editor.viewModel.sketchViewModel.updateGraphics.items;
let newData = getUpdateFeatures;
newData[0].geometry.latitude += 0.0005;// 修改经纬度
newData[0].geometry.longitude += 0.0005;
newData[0].attributes.Angle += 20;// 修改角度
// console.log("接受到的编辑数据newData[0]", newData[0]);
let edits = {
updateFeatures: newData
};
AxleLayer.applyEdits(edits);
console.log();
};
function exitEdit(editor, AxleLayer){
let getUpdateFeatures = editor.viewModel.sketchViewModel.updateGraphics.items;
let newData = getUpdateFeatures;
let edits = {
updateFeatures: newData
};
AxleLayer.applyEdits(edits);
editor.cancelWorkflow();
}
});
</script>
</head>
<body>
<div id="viewDiv">
</div>
</body>
</html>
Related
I have a web app written with ASP .NET Core, on one of the pages there is a bar chart created using chartJS (it gets data from database). I'm trying to display data values over each bar in the chart. I tried using this plugin, but then my chart doesn't show on the page and I'm getting the following errors: Uncaught ReferenceError: ChartDataLabels is not defined and Uncaught TypeError: Cannot set property 'datalabels' of undefined:
Here is my code for the chart:
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.3.0/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#1.0.0"></script>
<div>
<canvas id="workTSChart_MTK"></canvas>
</div>
<script>
$(document).ready(function () {
$.ajax({
type: "Get",
url: '#Url.Action("OnGetWorkTSData_MTK","home")',
contentType: "application/json",
dataType: "json",
success: function (response) {
var data = response.hrPlan;
var data2 = response.hrReestr;
var data3 = response.hrFact;
console.log("hrPlan=" + response.hrPlan);
console.log("hrSub=" + response.hrReestr);
console.log("hrFact=" + response.hrFact);
var ctx = document.getElementById("workTSChart_MTK");
var workTSChart = new Chart(ctx, {
plugins: [ChartDataLabels],
type: 'bar',
data: {
labels: [
'ООО "МТК"',
],
datasets: [{
label: 'Plan',
data: [response.hrPlan],
backgroundColor: 'rgb(161, 221, 239)',
borderColor: 'rgb(161, 221, 239)',
},
{
label: 'Sub',
data: [data2],
backgroundColor: 'rgb(254, 171, 133)',
borderColor: 'rgb(254, 171, 133)',
},
{
label: 'Fact',
data: [data3],
backgroundColor: 'rgb(127, 137, 138)',
borderColor: 'rgb(127, 137, 138)',
}]
},
options: {
responsive: true,
scales: {
y: {
max: 600000,
min: 500000,
ticks: {
stepSize: 10000,
}
}
},
plugins: {
datalabels: {
color: '#000000',
display: true,
},
legend: {
position: 'top',
},
title: {
display: true,
text: 'Sample title'
}
}
},
});
},
error: function (response) {
alert(response.responseText);
console.log("This is ERROR line");
}
});
});
</script>
What am I missing?
UPDATE:
I've updated my code thanks to #LeeLenalee's advice, but now I'm getting another error message: Uncaught TypeError: Cannot read property 'skip' of undefined
Updated code:
<div>
<canvas id="workTSChart_MTK"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#1.0.0"></script>
<script>
$(document).ready(function () {
$.ajax({
type: "Get",
url: '#Url.Action("OnGetWorkTSData_MTK","home")',
contentType: "application/json",
dataType: "json",
success: function (response) {
var data = response.hrPlan;
var data2 = response.hrReestr;
var data3 = response.hrFact;
console.log("hrPlan=" + response.hrPlan);
console.log("hrSub=" + response.hrReestr);
console.log("hrFact=" + response.hrFact);
var ctx = document.getElementById("workTSChart_MTK");
var workTSChart = new Chart(ctx, {
plugins: [ChartDataLabels],
type: 'bar',
data: {
labels: [
'ООО "МТК"',
],
datasets: [{
label: 'Plan',
data: [response.hrPlan],
backgroundColor: 'rgb(161, 221, 239)',
borderColor: 'rgb(161, 221, 239)',
},
{
label: 'Sub',
data: [data2],
backgroundColor: 'rgb(254, 171, 133)',
borderColor: 'rgb(254, 171, 133)',
},
{
label: 'Hour',
data: [data3],
backgroundColor: 'rgb(127, 137, 138)',
borderColor: 'rgb(127, 137, 138)',
}]
},
options: {
responsive: true,
scales: {
y: {
max: 600000,
min: 500000,
ticks: {
stepSize: 10000,
}
}
},
plugins: {
datalabels: {
color: '#000000',
display: true,
},
legend: {
position: 'top',
},
title: {
display: true,
text: 'Sample title'
}
}
},
});
},
error: function (response) {
alert(response.responseText);
console.log("This is ERROR line");
}
});
});
</script>
UPDATE 2:
As it turns out, there is an updated version of chartjs-plugin-datalabels that is working with ChartJS 3.0, so the solution was to implement latest versions of both as shown below:
<body>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.5.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0/dist/chartjs-plugin-datalabels.min.js"></script>
</body>
As stated in the documentation you will need to have at least Chart.js version 2.7.0 installed, you are currently using 2.3.0.
After that you either have to register the plugin globally by calling Chart.plugins.register(ChartDataLabels); so all the charts have the datalabels or register it locally to the chart you want the labels for as shown in the example below:
const options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
},
plugins: [ChartDataLabels]
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#1.0.0"></script>
</body>
I'm trying to add custom text to the Chartjs chart (using vue-chartjs), what I've found out so far is that I need to do this via beforeDraw (or similar) plugin. I included the plugin in the options.plugins, but it doesn't get triggered.
What am I doing wrong? Here's the code
<script>
import {Scatter} from "vue-chartjs";
export default {
extends: Scatter,
props: {
chartdata: {
type: Object,
default: null
},
options: {
type: Object,
default: null
}
},
mounted () {
this.renderChart(this.chartdata, {
scales: {
xAxes: [{
ticks: {
max: 100,
min: -100
},
type: 'linear',
}],
yAxes: [{
display: true,
type: 'linear',
ticks: {
max: 100,
min: -100
}
}]
},
elements: {
point: {
pointStyle: 'circle',
radius: 16,
backgroundColor: "#dc005a"
}
},
layout: {
padding: {
left: 25,
right: 25,
top: 25,
bottom: 25
}
},
plugins: [{
id: "AddLegend",
beforeDraw(chart) {
console.log(chart)
},
}],
});
}
}
</script>
Plugins can optionally be registered globally through Chart.plugins.register. You can register any of the hooks provided by the Plugin Core API and provide your custom code. The afterDraw hook for example would have to be registered as follows:
Chart.plugins.register({
afterDraw: chart => {
// your code
}
});
mounted () {
this.addPlugin({
id: 'my-plugin',
afterDraw: function (chart) {
var ctx = chart.ctx;
ctx.font = "bold 20px FiraGO";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("ლიბერალური", chart.width/2, chart.height - 25);
ctx.font = "bold 20px FiraGO";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("ავტორიტარული", chart.width/2, 25);
ctx.font = "bold 20px FiraGO";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.rotate(Math.PI/2);
ctx.fillText("გეგმიური ეკონომიკა", chart.width/(-2), 25);
// ctx.save();
ctx.fillText("თავისუფალი ეკონომიკა", chart.width/(-2), chart.height - 25);
// ctx.save();
// ctx.rotate(Math.PI/(-2))
// ctx.save();
}
});
this.renderChart(this.chartdata, {
scales: {
xAxes: [{
ticks: {
max: 100,
min: -100
},
type: 'linear',
}],
yAxes: [{
display: true,
type: 'linear',
ticks: {
max: 100,
min: -100
}
}]
},
elements: {
point: {
pointStyle: 'circle',
radius: 16,
backgroundColor: "#dc005a"
}
},
layout: {
padding: {
left: 50,
right: 50,
top: 50,
bottom: 50
}
},
});
}
I want to use the Legends feature for ArcGIS using the ArcGIS Javascript API. So I used the UniqueValueRenderer for my CSVLayer.
The CSVLayer is displayed correctly. But when I display using Google Chrome, defaultSymbol is rendered in all the case. But when I view it using Mozilla Firefox or Microsoft Edge it is working fine.
Screenshot of Chrome:
Screenshot of Firefox:
var renderer = new UniqueValueRenderer({
defaultLabel: "Other files",
field: "Category",
defaultSymbol: {
type: "point-3d", // autocasts as new PointSymbol3D()
symbolLayers: [{
type: "icon", // autocasts as new IconSymbol3DLayer()
material: {
color: "#ABB2B9"
},
outline: {
width: 0.2,
color: p6
},
size: "12px"
}]
}, // autocasts as new SimpleFillSymbol()
legendOptions: {
title: "File type"
}
});
renderer.addUniqueValueInfo({
label: "Drawing",
description: "Drawing files(.dwg, .rvt etc.)",
value: "1",
symbol: {
type: "point-3d", // autocasts as new PointSymbol3D()
symbolLayers: [{
type: "icon", // autocasts as new IconSymbol3DLayer()
material: {
color: "#2ECC71"
},
outline: {
width: 0.8,
color: p6
},
size: "12px"
}]
}
});
renderer.addUniqueValueInfo({
label: "Specter",
description: "Specter files.",
value: "2",
symbol: {
type: "point-3d", // autocasts as new PointSymbol3D()
symbolLayers: [{
type: "icon", // autocasts as new IconSymbol3DLayer()
material: {
color: "#F3AD12"
},
outline: {
width: 0.8,
color: p6
},
size: "12px"
}]
}
});
renderer.addUniqueValueInfo({
label: "Snapshots",
description: "Image files (.jpg, .png, .bmp etc.)",
value: "3",
symbol: {
type: "point-3d", // autocasts as new PointSymbol3D()
symbolLayers: [{
type: "icon", // autocasts as new IconSymbol3DLayer()
material: {
color: "#E74C3C"
},
outline: {
width: 0.8,
color: p6
},
size: "12px"
}]
}
});
renderer.addUniqueValueInfo({
label: "Documents",
description: "Office files (.doc, .xls, .xlsx etc.)",
value: "4",
symbol: {
type: "point-3d", // autocasts as new PointSymbol3D()
symbolLayers: [{
type: "icon", // autocasts as new IconSymbol3DLayer()
material: {
color: "#A569BD"
},
outline: {
width: 0.8,
color: p6
},
size: "12px"
}]
}
});
These are the content in my CSVFile
Latitude,Longitude,Depth,DocumentId,FileId,DocumentNumber,DocumentCreatedByUserName,DocumentDescription,RevisionNoValue,Category,OriginalFileName
"28.963349","77.684915","0","STR##104440","105134","ENGG-DOC-DEC-004","User","Description 1","0","0",""
"28.792274","77.522666","0","STR##102182","103587","ENGG-CIV-003","User","Description 2","0","2","ENGG-CIV-003.pdf"
The whole ArcGIS code
require([
"esri/Map",
"esri/layers/CSVLayer",
"esri/views/SceneView",
"esri/widgets/BasemapGallery",
"esri/widgets/Expand",
"esri/widgets/Locate",
"esri/widgets/Search",
"esri/Graphic",
"esri/PopupTemplate",
"esri/renderers/UniqueValueRenderer",
"esri/widgets/Legend"
], function(Map, CSVLayer, SceneView, BasemapGallery, Expand, Locate, Search, Graphic, PopupTemplate, UniqueValueRenderer, Legend) {
// If CSV files are not on the same domain as your website, a CORS enabled server
// or a proxy is required.
debugger;
var renderer = new UniqueValueRenderer({
defaultLabel: "Other files",
field: "Category",
defaultSymbol: {
type: "point-3d",
symbolLayers: [{
type: "icon",
material: {
color: "#ABB2B9"
},
outline: {
width: 0.2,
color: p6
},
size: "12px"
}]
}, // autocasts as new SimpleFillSymbol()
legendOptions: {
title: "File type"
}
});
renderer.addUniqueValueInfo({
label: "Drawing",
description: "Drawing files(.dwg, .rvt etc.)",
value: "1",
symbol: {
type: "point-3d",
symbolLayers: [{
type: "icon",
material: {
color: "#2ECC71"
},
outline: {
width: 0.8,
color: p6
},
size: "12px"
}]
}
});
renderer.addUniqueValueInfo({
label: "Specter",
description: "Specter files.",
value: "2",
symbol: {
type: "point-3d",
symbolLayers: [{
type: "icon",
material: {
color: "#F3AD12"
},
outline: {
width: 0.8,
color: p6
},
size: "12px"
}]
}
});
renderer.addUniqueValueInfo({
label: "Snapshots",
description: "Image files (.jpg, .png, .bmp etc.)",
value: "3",
symbol: {
type: "point-3d",
symbolLayers: [{
type: "icon",
material: {
color: "#E74C3C"
},
outline: {
width: 0.8,
color: p6
},
size: "12px"
}]
}
});
renderer.addUniqueValueInfo({
label: "Documents",
description: "Office files (.doc, .xls, .xlsx etc.)",
value: "4",
symbol: {
type: "point-3d",
symbolLayers: [{
type: "icon",
material: {
color: "#A569BD"
},
outline: {
width: 0.8,
color: p6
},
size: "12px"
}]
}
});
var url = '<valid csv file url>';
var template = {
title: "Document basic info - {DocumentNumber}",
content: "Document number: {DocumentNumber}," +
"<br/>Description: {DocumentDescription}" +
"<br/>Revision no: {RevisionNoValue}" +
"<br/>File name: {OriginalFileName}" +
"<br/>Created by: {DocumentCreatedByUserName}" +
"<br/><br/><a href='#' onclick='ViewDocumentDetails(`{DocumentId}`)'>Click here</a> to view the document details"
};
var csvLayer = new CSVLayer({
title: "Documents",
url: url,
copyright: "Wrench Solutions",
popupTemplate: template,
elevationInfo: {
// drapes icons on the surface of the globe
mode: "on-the-ground"
},
renderer: renderer
});
var map = new Map({
basemap: "topo",
ground: "world-elevation",
layers: [csvLayer]
});
var view = new SceneView({
container: "viewDiv",
center: [138, 35],
zoom: 4,
map: map
});
var basemapGallery = new BasemapGallery({
view: view,
container: document.createElement("div")
});
var locateBtn = new Locate({
view: view
});
var search = new Search({
view: view
});
view.ui.add(search, "top-right");
var bgExpand = new Expand({
view: view,
content: basemapGallery
});
view.ui.add(locateBtn, {
position: "top-left"
});
view.ui.add(bgExpand, "bottom-right");
var legendExpand = new Expand({
view: view,
content: new Legend({
view: view,
style: "card",
})
});
view.ui.add(legendExpand, "bottom-left");
$(".esri-attribution__sources").css('display', 'none');
});
I want to know if this is an issue with ArcGIS Online as a whole as a similar issue exists in ArcGIS online.
It appears that Chrome interprets fields in the CSV differently than Firefox. The fields DocumentID, Category and RevisionNoValue are interpreted as dates in Chrome, which is why none of the values of the UniqueValueRenderer match.
You have to options:
Fix the CSV by removing the quotes (") around the numbers
Tell the CSVLayer specifically what type of fields your CSV contains
var csvLayer = new CSVLayer({
title: "Documents",
url: url,
copyright: "Wrench Solutions",
popupTemplate: template,
elevationInfo: {
// drapes icons on the surface of the globe
mode: "on-the-ground"
},
renderer: renderer,
fields: [
{
alias: "__OBJECTID",
name: "__OBJECTID",
type: "oid"
},{
alias: "Latitude",
name: "Latitude",
type: "double"
},
...
,{
alias: "Category",
name: "Category",
type: "integer"
},{
alias: "OriginalFileName",
name: "OriginalFileName",
type: "string"
}
]
});
See the following Codepen for the complete source code
https://codepen.io/arnofiva/pen/cba32aedd13ceec9719cbf20b485f458
I'm trying to display nodes that have a font icon in the center of the node using 'content' and a text label underneath.
My styling is currently:
{
'selector': 'node[icon]',
'style': {
'content': 'data(icon)',
'font-family': 'Material Icons',
'text-valign': 'center',
'text-halign': 'center'
}
},
{
'selector': 'node[label]',
'style': {
'label': 'data(label)',
'text-valign': 'bottom',
'text-halign': 'center'
}
}
However, this doesn't work as i assume both of the styles is used on one element (the node).
There are a few solutions I've considered, such as:
Putting the label on a parent node
Use Popper.js or similar to show the label
Use a multi-lined label
The first 2 seem 'hacky', and the third could cause a lot of alignment problems. Is there a better solution to this?
I've found a solution using the extension: https://github.com/kaluginserg/cytoscape-node-html-label.
You can create custom HTML labels for nodes which do not interfere with the base Cytoscape labels. An example of using the Material Icons:
// Initialise the HTML Label
this.cy.nodeHtmlLabel([{
query: '.nodeIcon',
halign: 'center',
valign: 'center',
halignBox: 'center',
valignBox: 'center',
tpl: (data) => {
return '<i class="material-icons">' + data.icon + '</i>';
}
}]);
// Add the HTML Label to the node:
const node = {
group: 'nodes',
data: {
id: data.id,
label: data.label,
icon: data.icon
},
classes: 'nodeIcon' // <---- Add the HTML Label class here
};
With the method you can dynamically create nodes with font icons without the need to download a load of images.
You can even add CSS styling to change the colour of the icon:
If you want an icon as the nodes body, you can use it as the background image and define the label like you do:
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: 'node',
css: {
'label': 'data(id)',
'text-valign': 'bottom',
'text-halign': 'center',
'height': '60px',
'width': '60px',
'border-color': 'black',
'border-opacity': '1',
'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg',
"text-background-opacity": 1,
"text-background-color": "lightgray"
}
},
{
selector: ':selected',
css: {
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
}
}
],
elements: {
nodes: [{
data: {
id: 'n0'
}
},
{
data: {
id: 'n1'
}
},
{
data: {
id: 'n2'
}
},
{
data: {
id: 'n3'
}
},
{
data: {
id: 'n4'
}
},
{
data: {
id: 'n5'
}
},
{
data: {
id: 'n6'
}
},
{
data: {
id: 'n7'
}
},
{
data: {
id: 'n8'
}
},
{
data: {
id: 'n9'
}
},
{
data: {
id: 'n10'
}
},
{
data: {
id: 'n11'
}
},
{
data: {
id: 'n12'
}
},
{
data: {
id: 'n13'
}
},
{
data: {
id: 'n14'
}
},
{
data: {
id: 'n15'
}
},
{
data: {
id: 'n16'
}
}
],
edges: [{
data: {
source: 'n0',
target: 'n1'
}
},
{
data: {
source: 'n1',
target: 'n2'
}
},
{
data: {
source: 'n1',
target: 'n3'
}
},
{
data: {
source: 'n2',
target: 'n7'
}
},
{
data: {
source: 'n2',
target: 'n11'
}
},
{
data: {
source: 'n2',
target: 'n16'
}
},
{
data: {
source: 'n3',
target: 'n4'
}
},
{
data: {
source: 'n3',
target: 'n16'
}
},
{
data: {
source: 'n4',
target: 'n5'
}
},
{
data: {
source: 'n4',
target: 'n6'
}
},
{
data: {
source: 'n6',
target: 'n8'
}
},
{
data: {
source: 'n8',
target: 'n9'
}
},
{
data: {
source: 'n8',
target: 'n10'
}
},
{
data: {
source: 'n11',
target: 'n12'
}
},
{
data: {
source: 'n12',
target: 'n13'
}
},
{
data: {
source: 'n13',
target: 'n14'
}
},
{
data: {
source: 'n13',
target: 'n15'
}
},
]
},
layout: {
name: 'dagre',
padding: 5
}
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 75%;
position: absolute;
left: 0;
top: 0;
float: left;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
<script src="https://unpkg.com/dagre#0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
var colors = ['url(#v-1)',
'url(#v-2)',
'url(#v-3)',
'url(#v-4)',
'url(#v-5)'];
var baseColor = '#eee';
Ext.define('Ext.chart.theme.Fancy', {
extend: 'Ext.chart.theme.Base',
constructor: function(config) {
this.callParent([Ext.apply({
axis: {
fill: baseColor,
stroke: baseColor
},
axisLabelLeft: {
fill: baseColor
},
axisLabelBottom: {
fill: baseColor
},
axisTitleLeft: {
fill: baseColor
},
axisTitleBottom: {
fill: baseColor
},
colors: colors
}, config)]);
}
});
var win = Ext.create('Ext.Panel', {
width: 1000,
height: 300,
hidden: false,
maximizable: true,
title: 'Column Chart',
renderTo: Ext.getBody(),
enableToggle: true,
pressed: true,
layout: 'fit',
items: {
id: 'chartCmp',
xtype: 'chart',
theme: 'Fancy',
animate: {
easing: 'bounceOut',
duration: 750
},
store: store,
background: {
fill: 'rgb(17, 17, 17)'
},
gradients: [
{
'id': 'v-1',
'angle': 0,
stops: {
0: {
color: 'rgb(212, 40, 40)'
},
100: {
color: 'rgb(117, 14, 14)'
}
}
},
{
'id': 'v-2',
'angle': 0,
stops: {
0: {
color: 'rgb(180, 216, 42)'
},
100: {
color: 'rgb(94, 114, 13)'
}
}
},
{
'id': 'v-3',
'angle': 0,
stops: {
0: {
color: 'rgb(43, 221, 115)'
},
100: {
color: 'rgb(14, 117, 56)'
}
}
},
{
'id': 'v-4',
'angle': 0,
stops: {
0: {
color: 'rgb(45, 117, 226)'
},
100: {
color: 'rgb(14, 56, 117)'
}
}
},
{
'id': 'v-5',
'angle': 0,
stops: {
0: {
color: 'rgb(187, 45, 222)'
},
100: {
color: 'rgb(85, 10, 103)'
}
}
}],
axes: [{
type: 'Numeric',
position: 'left',
fields: ['Quantidade'],
minimum: 0,
// maximum: 100,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Numero de Processos',
grid: {
odd: {
stroke: '#555'
},
even: {
stroke: '#555'
}
}
}, {
type: 'Category',
position: 'bottom',
fields: 'Range',
title: 'Espaço temporal'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
highlightCfg: {
fill: '#a2b5ca'
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
//Numero que aparece em cima da barra
field: 'Quantidade',
orientation: 'horizontal',
fill: '#fff',
font: '17px Arial'
},
renderer: function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i % colors.length];
return barAttr;
},
style: {
opacity: 0.95
},
listeners: {
'itemmousedown': function(item) {
if(!flag) return flag;
flag = false;
var cmp = Ext.getCmp('chartCmp');
var series = cmp.series.get(0);
index = Ext.Array.indexOf(series.items, item);
selectionModel = grid.getSelectionModel();
selectedStoreItem = item.storeItem;
var as = selectedStoreItem.data.Range;
storeDadosFiltrados.proxy.extraParams.range = as;
storeDadosFiltrados.load();
}
},
xField: 'Range',
yField: ['Quantidade']
}]
},
renderTo:'grafico'
});
});
image of the chart--> http://alojaimagens.com/viewer.php?file=zz7slhsprnopuoui1mpv.jpg
I am selecting the first column, and i don't click it, just with the mouse over it. The higlight color is a variante of blue. But in the code i use itemmousedown, and i don't understand why the bar changed color only by passing by the mouse? how can i put it only highlight only in mouse click?
What about highlight: false?
If you just want the bar to be highlighted by a click, you should add a listener which highlights it on clicking the bar.