Flot 饼图 - 外部选择切片

发布于 2024-12-25 11:05:52 字数 280 浏览 1 评论 0原文

我找到了这个解决方案

如果图表类型为 pie,如何指定参数 (x,y ) 的突出显示(x, y)?

谢谢

抱歉我的英语不好。

I found this solution.

If type of chart is pie, how specify parameters (x,y) of highlight(x, y)?

Thanks

Sorry for my bad English.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

默嘫て 2025-01-01 11:05:52

不幸的是,flot 不会向用户公开饼图突出显示代码。所以我们很不走运,但可能对您有用的是在页面上适当的位置合成一个点击事件:

$("#highligher").click(function () {
    var e = jQuery.Event('click');
    e.pageX = 250; //add a made up x/y coordinate to the click event
    e.pageY = 250;
    $('#plot canvas:first').trigger(e); //trigger the click event on the canvas
});

这里是实际的:http://jsfiddle.net/ryleyb/mHJm5/

问题是你必须知道你想要突出显示的切片已经在哪里。如果图表是静态的,这将很容易设置。如果它是动态图,您必须深入研究饼图代码的源代码才能弄清楚如何计算饼图切片的位置。在这种情况下,只拥有所有饼图函数的副本并在饼图叠加层上手动绘制可能会更容易。

Unfortunately, flot doesn't expose the pie highlighting code to the user. So we are pretty much out of luck, but what may work for you is synthesizing a click event at the appropriate place on the page:

$("#highligher").click(function () {
    var e = jQuery.Event('click');
    e.pageX = 250; //add a made up x/y coordinate to the click event
    e.pageY = 250;
    $('#plot canvas:first').trigger(e); //trigger the click event on the canvas
});

Here it is in action: http://jsfiddle.net/ryleyb/mHJm5/

The problem is you have to know where the slice you want to highlight is already. This would be easy enough to set if the graph is static. If it's a dynamic graph, you'd have to dig into the source of the pie code to figure out how to calculate where the pie slice is. It might be easier in that case to just have a copy of all the pie functions and manually draw on the pie overlay.

零度℉ 2025-01-01 11:05:52

只是通过改变一些东西来实现这个工作...

我将 jquery.flot.pie.js 中的 highlightunhighlight 更改为 pieHighlight 和 <代码>pieUnhighlight。

然后,在 jquery.flot.pie.js 中的这两行之后...

plot.hooks.processOptions.push(function(plot, options) {
            if (options.series.pie.show) {

我添加了...

                plot.highlight = pieHighlight;
                plot.unhighlight = pieUnhighlight;

Just got this working by altering a few things...

I changed highlight and unhighlight in jquery.flot.pie.js to pieHighlight and pieUnhighlight.

Then, after these two lines in jquery.flot.pie.js...

plot.hooks.processOptions.push(function(plot, options) {
            if (options.series.pie.show) {

I added...

                plot.highlight = pieHighlight;
                plot.unhighlight = pieUnhighlight;

我们在图表之外维护选择状态(作为骨干模型)。当发生选择事件(单击)时,我们在模型中设置选定的切片。当选择更改时,我们使用所选饼图切片的选择颜色刷新图表。

var data = [];
var color = slice.index == selected ? '#FF0000' : '#0000FF';
data.push({label:slice.Label,data:slice.Value,color:color});

上面的代码片段对所有未选定的切片使用蓝色,对选定的切片使用红色。你的色彩逻辑将会更加复杂。

注意:您还可以使用 rgba CSS 作为颜色,这会产生非常好的效果。例如:

var color = slice.index == selected ? 'rgba(0,0,255,1)' : 'rgba(0,0,255,0.5)';

We're maintaining selection state outside of the chart (as a backbone model). When a selection event (click) occurs, we set the selected slice in the model. When selection changes, we refresh the chart using a selection color for the pie slices that are selected.

var data = [];
var color = slice.index == selected ? '#FF0000' : '#0000FF';
data.push({label:slice.Label,data:slice.Value,color:color});

The snippet above uses blue for all non-selected slices, red for the selected slice. Your color logic will be more sophisticated.

NOTE: You can also use rgba CSS for the colors, which gives a really nice effect. For example:

var color = slice.index == selected ? 'rgba(0,0,255,1)' : 'rgba(0,0,255,0.5)';
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文