¿Hay alguna forma de implementar una información sobre herramientas personalizada para visualizar mis valores adjuntos al nodo en particular? Por ejemplo {id:"1",name:"Socialmedia",gbw:123,mbw:365,parent:"0",value:150} Estos son valores adjuntos a un nodo particular en mi árbol. cuando estoy al pasar el mouse, necesito mostrar el valor "gbw" como información sobre herramientas.
tooltip: { text : "Guranteed Bandwidth: %node-gbw <br>Maximum Bandwidth:" }Probé este código y %data-gbw también en la información sobre herramientas. Pero no muestra nada cuando está en el aire. ¿Los gráficos zing admiten este tipo de visualización?
Usando tokens de data- en los datos de la serie, debería poder lograr esto. Por ejemplo
series: [{ values : [counts[0]], "data-msg" : "Fast enough", text: "< 400 ms", backgroundColor: '#92BCEA', detached: true },y luego su objeto de información sobre herramientas usaría el valor
tooltip : { fontSize : '18', fontFamily : "Open Sans", padding: "5 10", text: "%plot-text is %data-msg" }, // CHART CONFIG // ----------------------------- let counts = [0.62, 0.15, 0.15, 0.06]; let chartConfig = { type : 'pie', title: { text: 'Time to Load', align: "center", offsetX: 10, fontSize: 25 }, valueBox: { placement: 'out', text: '%t\n%npv%', fontFamily: "Open Sans" }, legend: { backgroundColor: "#eee", fontSize: '1.5em', width: '150em' }, tooltip : { fontSize : '18', fontFamily : "Open Sans", padding: "5 10", text: "%plot-text is %data-msg" }, series: [{ values : [counts[0]], "data-msg" : "Fast enough", text: "< 400 ms", backgroundColor: '#92BCEA', detached: true }, { values: [counts[1]], "data-msg" : "So so", text: "400-599 ms", backgroundColor: '#5E7A97' }, { "values": [counts[2]], "data-msg" : "Slow!", "text": '600-799 ms', "backgroundColor": '#617073', }, { "text": '800+ms', "values": [counts[3]], "backgroundColor": '#171A21', "data-msg" : "Really slow!" }] }; // RENDER CHARTS // ----------------------------- zingchart.render({ id: 'myChart', data: chartConfig, height: '100%', width: '100%', }); @import 'https://fonts.googleapis.com/css?family=Open+Sans'; .zc-body { background-color: #2B313B; } .chart--container { height: 100%; width: 100%; min-height: 530px; } .zc-ref { display: none; } <!doctype html> <html class="zc-html"> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <script src="https://cdn.zingchart.com/zingchart.min.js"></script> </head> <body class="zc-body"> <div id="myChart" class="chart--container"> <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a> </div> </body> </html>Tenga en cuenta que trabajo para ZingSoft, pero puede acudir al soporte o usar nuestro estudio para hacer una demostración si desea que nuestro soporte sea más predecible. Puse una demostración completa de trabajo allí para usted: https://app.zingsoft.com/demos/create/8OYIRFIC