ZingChart如何在单击/选择时修改节点

Question

我正在使用 ZingChart 作为标准条形图。我为各个酒吧选择了状态，可以按照我的意愿工作，但只有一件事。有没有办法显示值框（全局设置为可见：false）以在单击/选择时仅显示所选节点？我能够使每个节点的值框显示在我添加的单击事件中，以使用 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",
	"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>