ZingChart как изменить узел после щелчка/выберите

Question

Я использую ZingChart для стандартной гистограммы. У меня есть выбранное состояние для отдельных баров, работающих, как хотелось бы, но с одной стороны. Есть ли способ показать окно значения (установленное на видимое: ложное глобально), чтобы показывать только выбранный узел при его нажатии или выборе? Я смог сделать окно значений для каждого показа узла в событии клика, которое я добавил, чтобы вызвать внешнюю функцию с помощью метода modifyplot, но я не вижу подобного метода для таких узлов, как modifynode. Если это не вариант, есть ли способ вставить поле «поддельное» значение, разметка которого будет создаваться «на лету» во время события клика и показать этот элемент над выбранным узлом? Ниже приведен код рендеринга для рассматриваемой диаграммы. Спасибо за ваше время!

zingchart.render({ 
     id: "vsSelfChartDiv", 
     width: '100%', 
     height: '100%', 
     output: 'svg', 
     data: myChartVsSelf, 
     events:{ 
      node_click:function(p){ 
       zingchart.exec('vsSelfChartDiv', 'modifyplot', { 
        graphid : 0, 
        plotindex : p.plotindex, 
        nodeindex : p.nodeindex, 
        data : { 
         "value-box":{ 
          "visible":true 
         } 
        } 
       }); 
       var indexThis = p.nodeindex; 
       var indexDateVal = $('#vsSelfChartDiv-graph-id0-scale_x-item_'+indexThis).find('tspan').html(); 
       updateTop(indexDateVal); 
      } 
     } 
    }); 

Answer 1

Возможно, вам лучше использовать ярлык вместо знака. Здесь я собрал демо.

Я нахожусь в команде ZingChart. Не стесняйтесь ударить меня, если у вас есть еще вопросы.

// Set up your data 
 
var myChart = { 
 
    "type":"line", 
 
\t "title":{ 
 
\t \t "text":"Average Metric" 
 
\t }, 
 
    
 
    // The label below will be your 'value-box' 
 
    "labels":[ 
 
     { 
 
      // This id allows you to access it via the API 
 
      "id":"label1", 
 
      "text":"", 
 
      // The hook describes where it attaches 
 
      "hook":"node:plot=0;index=2", 
 
      "border-width":1, 
 
      "background-color":"white", 
 
      "callout":1, 
 
      "offset-y":"-30%", 
 
      // Hide it to start 
 
      "visible":false, 
 
      "font-size":"14px", 
 
      "padding":"5px" 
 
     } 
 
    ], 
 
    // Tooltips are turned off so we don't have 
 
    // hover info boxes and click info boxes 
 
    "tooltip":{ 
 
     "visible":false 
 
    }, 
 
\t "series":[ 
 
\t \t { 
 
\t \t \t "values":[69,68,54,48,70,74,98,70,72,68,49,69] 
 
\t \t } 
 
\t ] 
 
}; 
 

 
// Render the chart 
 
zingchart.render({ 
 
    id:"myChart", 
 
    data:myChart 
 
}); 
 

 
// Bind your events 
 

 
// Shows label and sets it to the plotindex and nodeindex 
 
// of the clicked node 
 
zingchart.bind("myChart","node_click",function(p){ 
 
    zingchart.exec("myChart","updateobject", { 
 
     "type":"label", 
 
     "data":{ 
 
      "id":"label1", 
 
      "text":p.value, 
 
      "hook":"node:plot="+p.plotindex+";index="+p.nodeindex, 
 
      "visible":true 
 
     } 
 
    }); 
 
}); 
 

 
// Hides callout label when click is not on a node 
 
zingchart.bind("myChart","click",function(p){ 
 
    if (p.target != 'node') { 
 
     zingchart.exec("myChart","updateobject", { 
 
     "type":"label", 
 
     "data":{ 
 
      "id":"label1", 
 
      "visible":false 
 
     } 
 
    }); 
 
    } 
 
});

<script src='http://cdn.zingchart.com/zingchart.min.js'></script> 
 
<div id="myChart" style="width:100%;height:300px;"></div>