ZingChart 如何在 click/select 上修改节点

Question

我正在使用 ZingChart 制作标准条形图。我选择了各个条形图的状态，但出于一件事。有没有办法显示值框（全局设置为 visible:false）以仅显示所选节点时 clicked/selected？我能够使每个节点的值框显示在我添加的单击事件中，以使用 modifyplot 方法调用外部函数，但我没有看到类似的节点方法，例如 modifynode。如果这不是一个选项，是否有任何方法可以插入一个 "fake" 值框，其标记将在单击事件期间即时创建，并使该元素显示在所选节点上方？下面是我对相关图表的渲染代码。感谢您的宝贵时间！

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",
 "title":{
  "text":"Average Metric"
 },
  
    // 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
    },
 "series":[
  {
   "values":[69,68,54,48,70,74,98,70,72,68,49,69]
  }
 ]
};

// 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>

ZingChart 如何在 click/select 上修改节点

ZingChart how to modify node upon click/select

zingchart