ZingChart如何修改節點點擊/選擇

我正在使用ZingChart作爲標準條形圖。我有個別酒吧的選定狀態，但我只想說一件事。有沒有辦法顯示值框（全局設置爲visible：false），以便在所選節點單擊/選擇時顯示？我能夠使用modifyplot方法調用外部函數添加的單擊事件來爲每個節點顯示值框，但我沒有看到類似modifynode的節點的類似方法。如果這不是一種選擇，是否有任何方法可以插入一個「假」值框，其標記將在點擊事件期間實時創建，並讓該元素顯示在所選節點的上方？以下是我對有問題的圖表的呈現代碼。謝謝你的時間！ZingChart如何修改節點點擊/選擇

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); 
      } 
     } 
    });

來源

2015-04-22 Shayna Symons

你可能會更好使用標籤而不是價值箱。我在這裏做了一個演示。

我在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>

來源

2015-04-22 22:32:48

非常感謝你的幫助！我能夠修改您的代碼以完全滿足我的需求。 –

ZingChart如何修改節點點擊/選擇

回答

相關問題