Question

我使用ZingChart作为标准条形图。对于个别酒吧我选择的状态是按照我的意愿工作但是一件事。有没有办法显示值框（设置为visible：false全局），以便在单击/选择时显示所选节点？我能够使用modifyplot方法在我添加的单击事件中显示每个节点的值框以调用外部函数，但是我没有看到类似modifynode等节点的方法。如果这不是一个选项，是否有任何方法可以插入一个“假”值框，其标记将在click事件期间动态创建并且该元素显示在所选节点上方？下面是我所讨论的图表的渲染代码。谢谢你的时间！

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如何在点击/选择

1 个答案: