ZingChart получает положение перекрестия при нажатии

Событие ZingChart click указывает, что обратный вызов получит объект. Атрибут x будет содержать

Позиция x клика относительно позиции диаграммы

Я предполагаю, что это позиция курсора в окне (т.е. пиксели) относительно позиции (верхний левый угол?) элемента div, содержащего график.

Есть ли способ получить значение «X» положения перекрестия при щелчке, как показано на рисунке: Пример

то есть, если перекрестие находится на «0», я хочу получить это значение при нажатии. Когда я использую arg.x события щелчка, а перекрестие находится на «0», я получаю 49, а мне нужно 0.

Код:

var values = [0,2.81,5.61,8.38, ...]

var chartData={
    "type":"line",  // Specify your chart type here.
    "background-color":"#f4f4f4",
    "scale-x": {
        "zooming":true
    },
    "plot": {
//        "mode":"fast",
        "exact":true,
//        "smartSampling":true,
//        "maxNodes":0,
//        "maxTrackers":0,
        "lineWidth":2,
        "shadow":false,
        "marker":{
            "type":"none",
            "shadow":false
        }
    },
    "plotarea":{
        "background-color":"#fbfbfb",
        "margin-top":"30px",
        "margin-bottom":"40px",
        "margin-left":"50px",
        "margin-right":"30px"
    },
    "scaleX":{
        "autoFit":true,
        "zooming":true,
        "normalize":true,
        "lineWidth":1,
        "line-color":"#c7c9c9",
        "tick":{
            "lineWidth":1,
            "line-color":"#c7c9c9"
        },
        "guide":{
            "visible":false
        },
        "item":{
            "font-color":"#818181",
            "font-family":"Arial",
            "padding-top":"5px"
        },
        "maxLabels":10
    },
    "scrollX":{ },
    "scaleY":{
        "minValue":"auto",
        "autoFit":true,
        "lineWidth":1,
        "line-color":"#c7c9c9",
        "tick":{
            "lineWidth":1,
            "line-color":"#c7c9c9"
        },
        "item":{
            "font-color":"#818181",
            "font-family":"Arial",
            "padding-right":"5px"
        },
        "guide":{
            "lineStyle":"solid",
            "line-color":"#c7c9c9",
            "alpha":0.2
        }
    },
    "tooltip":{
        "visible":false
    },
    "crosshairX":{
        "lineWidth":1,
        "line-color":"#003849",
        "marker":{
            "size":4,
            "type":"circle",
            "borderColor":"#fff",
            "borderWidth":1
        },
        "scale-label":{
            "font-color":"#ffffff",
            "background-color":"#003849",
            "padding":"5px 10px 5px 10px",
            "border-radius":"5px"
        },
//            "plotLabel":{
//                "multiple":false,
//                "callout":false,
//                "shadow":false,
//                "height":"115px",
//                "padding":"5px 10px 5px 10px",
//                "border-radius":"5px",
//                "alpha":1,
//                "headerText":"Node %scale-key-text<br>",
//                "text":"<b>%plot-text:</b> %node-value"
//            }
    },

    "series":[  // Insert your series data here.
        {   "text": "P1",
            "values": values,
            "line-color":"#7ca82b",
            "line-width":1
        },
    ]
};
zingchart.render({ // Render Method[3]
    id:'id_graph_box',
    data:chartData,
    height:400,
    width:800,
});
zingchart.click=function(p) {
    console.log("GRAPH CLICKEND ON X:", p)

javascript charts zingchart
person evgeni tsvetanov    schedule 12.10.2016    source источник
comment
Пожалуйста, добавьте свой код.   -  person Feathercrown    schedule 12.10.2016
comment
Я отредактировал свой пост и вставил код   -  person evgeni tsvetanov    schedule 12.10.2016
comment
Я ищу то же значение, полученное из события guide_mousemove, и значение arg['scale-label']['scale-x'] аргумента события, но при щелчке вместо перемещения мыши   -  person evgeni tsvetanov    schedule 12.10.2016

Ответы (1)


arrow_upward
4
arrow_downward

Полное раскрытие, я член команды ZingChart.

Да, значения относятся к положению на диаграмме. Что вы можете сделать, так это использовать наши методы API, чтобы получить необходимую информацию о диаграмме на основе xy местоположения клика. Вы будете использовать getxyinfo, который получит массив информации о диаграмма. Он будет получать информацию о масштабе ближе всего к тому месту, где произошел щелчок. Это означает, что если вы щелкнете между двумя узлами (для масштаба-x), в зависимости от того, что ближе всего к (позиция x от щелчка), вы получите эту информацию. Перекрестие/направляющая работает так же при выделении узлов, так что это не должно быть проблемой. Я просто подумал, что это уместно поднять.

The demo below looks a little funky with the console.log() output. Here is a link hosted by us as well. 

var values = [0,2.81,5.61,8.38];

var chartData = {
    "type":"line",  // Specify your chart type here.
    "background-color":"#f4f4f4",
    "scale-x": {
        "zooming":true
    },
    "plot": {
//        "mode":"fast",
        "exact":true,
//        "smartSampling":true,
//        "maxNodes":0,
//        "maxTrackers":0,
        "lineWidth":2,
        "shadow":false,
        "marker":{
            "type":"none",
            "shadow":false
        }
    },
    "plotarea":{
        "background-color":"#fbfbfb",
        "margin-top":"30px",
        "margin-bottom":"40px",
        "margin-left":"50px",
        "margin-right":"30px"
    },
    "scaleX":{
        "autoFit":true,
        "zooming":true,
        "normalize":true,
        "lineWidth":1,
        "line-color":"#c7c9c9",
        "tick":{
            "lineWidth":1,
            "line-color":"#c7c9c9"
        },
        "guide":{
            "visible":false
        },
        "item":{
            "font-color":"#818181",
            "font-family":"Arial",
            "padding-top":"5px"
        },
        "maxLabels":10
    },
    "scrollX":{ },
    "scaleY":{
        "minValue":"auto",
        "autoFit":true,
        "lineWidth":1,
        "line-color":"#c7c9c9",
        "tick":{
            "lineWidth":1,
            "line-color":"#c7c9c9"
        },
        "item":{
            "font-color":"#818181",
            "font-family":"Arial",
            "padding-right":"5px"
        },
        "guide":{
            "lineStyle":"solid",
            "line-color":"#c7c9c9",
            "alpha":0.2
        }
    },
    "tooltip":{
        "visible":false
    },
    "crosshairX":{
        "lineWidth":1,
        "line-color":"#003849",
        "marker":{
            "size":4,
            "type":"circle",
            "borderColor":"#fff",
            "borderWidth":1
        },
        "scale-label":{
            "font-color":"#ffffff",
            "background-color":"#003849",
            "padding":"5px 10px 5px 10px",
            "border-radius":"5px"
        },
//            "plotLabel":{
//                "multiple":false,
//                "callout":false,
//                "shadow":false,
//                "height":"115px",
//                "padding":"5px 10px 5px 10px",
//                "border-radius":"5px",
//                "alpha":1,
//                "headerText":"Node %scale-key-text<br>",
//                "text":"<b>%plot-text:</b> %node-value"
//            }
    },

    "series":[  // Insert your series data here.
        {   "text": "P1",
            "values": values,
            "line-color":"#7ca82b",
            "line-width":1
        },
    ]
};

zingchart.render({ 
	id: 'myChart', 
	data: chartData, 
	height: '100%', 
	width: '100%' 
});

zingchart.bind('myChart', 'click', function(e) {
  
  /*
   * Returns array of information. 
   * xyInformation[0] -> scale-x info 
   * xyInformation[1] -> scale-y info 
   * xyInformation[2] -> node info
   */
  var xyInformation = zingchart.exec('myChart', 'getxyinfo', {
    x: e.x,
    y: e.y
  });
  console.log(xyInformation)
});
html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}

#myChart {
	height:100%;
	width:100%;
	min-height:150px;
}
<!DOCTYPE html>
<html>
	<head>
	<!--Assets will be injected here on compile. Use the assets button above-->
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
		<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
		ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script>
	<!--Inject End-->
	</head>
	<body>
		<div id="myChart"></div>
	</body>
</html>

person nardecky    schedule 12.10.2016
comment
Спасибо за ответ, это определенно то, что я искал. - person evgeni tsvetanov; 14.10.2016
comment
@kishanoza ваш комментарий не имеет отношения к этому сообщению. Пожалуйста, задайте новый вопрос или обратитесь за помощью по адресу [email protected]. - person nardecky; 25.03.2017