Highchart上下文菜单显示两次 [英] Highchart context menu showing two times

查看：66
本文介绍了Highchart上下文菜单显示两次的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用highcharts来显示图表。问题是，有时图表上下文菜单出现两次，这纯粹是不确定的。这对我来说更像是一种魔力。



我使用以下代码启用导出。



导出{enabled：true;}



请帮助解决这个问题。

I am using highcharts for showing graphs. The problem is, sometimes the chart context menu is appearing two times and it is purely uncertain. It is more like a magic to me.

I am using the following code to enable exporting.

exporting { enabled : true ;}

Please help in this regard.

推荐答案

HighCharts - 支持 [ ^ ]会是一个更好的问题有关此特定产品的帮助。
HighCharts - Support[^] would be a better place to ask for help on this specific product.


使用High Chart withy C＃的示例解决方案如下：



.ASPX文件：



<％@ Page Title =Language =C＃MasterPageFile =〜/ MasterPage.masterAutoEventWireup =true

CodeFile =Default3.aspx.csInherits =Default3％>



<％@ Register Assembly =HighchartNamespace =Highchart。 UITagPrefix =highchart％>

< asp：content id =Content1contentplaceholderid =ContentPlaceHolder1runat =Serverxmlns：asp =＃未知>

< style>

身体

{

保证金：0;

background-color：#FFF; / *＃369 * /

溢出：自动;

}



#content

{

背景：#FFF; / * 369 * /

身高：880px;

宽度：950px;

位置：相对;

top ：1200px;

z-index：0;

}



#caption

{

位置：相对;

顶部：-60px;

颜色：#FFF;

字体-size：25px;

font-family：Lucida Sans Unicode，Lucida Grande，sans-serif;

}



#pagecaption

{

职位：相对;

顶部：-60px;

颜色：#FFF;

字体大小：25px;

字体系列：Lucida Sans Unicode，Lucida Grande，sans-serif;

}

< / style>



<！ - buttons - >

The sample solution using High Chart withy C# is as follows:

.ASPX File:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<%@ Register Assembly="Highchart" Namespace="Highchart.UI" TagPrefix="highchart" %>
<asp:content id="Content1" contentplaceholderid="ContentPlaceHolder1" runat="Server" xmlns:asp="#unknown">
<style>
body
{
margin: 0;
background-color: #FFF; /*#369*/
overflow: auto;
}

#content
{
background: #FFF; /*369*/
height: 880px;
width: 950px;
position: relative;
top: 1200px;
z-index: 0;
}

#caption
{
position: relative;
top: -60px;
color: #FFF;
font-size: 25px;
font-family: "Lucida Sans Unicode" , "Lucida Grande" , sans-serif;
}

#pagecaption
{
position: relative;
top: -60px;
color: #FFF;
font-size: 25px;
font-family: "Lucida Sans Unicode" , "Lucida Grande" , sans-serif;
}
</style>

<!--buttons-->






高图表样本


< asp：label id =Label1runat =servertext =折线图 >







High Chart Samples

<asp:label id="Label1" runat="server" text="Line Chart">




< highchart：linechart id =hcLinechart runat =serverwidth =300height =300xmlns：highchart =＃unknown/>


<highchart:linechart id="hcLinechart" runat="server" width="300" height="300" xmlns:highchart="#unknown" />

< asp：label id =Label2runat =servertext =Column图表>








<asp:label id="Label2" runat="server" text="Column Chart">




< highchart：columnchart id =hcColumnChartrunat =serverwidth =300height =300xmlns：highchart =＃unknown/>


<highchart:columnchart id="hcColumnChart" runat="server" width="300" height="300" xmlns:highchart="#unknown" />


< asp ：label id =Label3runat =servertext =饼图>








<asp:label id="Label3" runat="server" text="Pie Chart">




< highchart：piechart id =hcPieChartrunat =serverwidth =300height =300xmlns：highchart =＃unknown/>


<highchart:piechart id="hcPieChart" runat="server" width="300" height="300" xmlns:highchart="#unknown" />

< ; asp：label id =Label4runat =servertext =Area Spl ine chart>








<asp:label id="Label4" runat="server" text="Area Spline Chart">




< highchart：areasplinechart id =hcAreaSplineChartrunat =serverwidth =300height =300xmlns：highchart =＃unknown/>


<highchart:areasplinechart id="hcAreaSplineChart" runat="server" width="300" height="300" xmlns:highchart="#unknown" />


< asp：label id =Label5 runat =servertext =折线图>








<asp:label id="Label5" runat="server" text="Line Chart">




< highchart：linechart id =hcLineChartThemerunat =serverwidth =300height =300xmlns：highchart =＃unknown/>


<highchart:linechart id="hcLineChartTheme" runat="server" width="300" height="300" xmlns:highchart="#unknown" />

< asp：label id =Label6runat =servertext =散点图>








<asp:label id="Label6" runat="server" text="Scatter Chart">




< highchart： scatterchart id =hcScatterChartrunat =serverwidth =300height =300xmlns：highchart =＃unknown/>


<highchart:scatterchart id="hcScatterChart" runat="server" width="300" height="300" xmlns:highchart="#unknown" />








< br $>


代码背后文件（.cs）：



使用系统;

使用System.Collections.Generic;

使用System.Linq;

使用System.Web;

使用System.Web.UI;

使用System.Web.UI.WebControls;

使用Highchart.Core;

使用Highchart.Core.Data.Chart;

使用Highchart.Core.PlotOptions;

使用Highchart.Core。外观;

使用System.IO;



public partial class Default3：System.Web.UI.Page

{

protected void Page_Load（object sender，EventArgs e）

{

if（！Page.IsPostBack）

{

试试

{

#region折线图

//标题

hcLinechart.Title =新标题（评级详情）;

//定义轴

hcLinechart.YAxis.Add（new YAxisItem {title = new Title（评分）}）;

hcLinechart.XAxis.Add（new XAxisItem {categories = new [] {ACVM2908U，ACVM4998U，ACVS3109W，ACVS3308W，ACVS3509W， ACVM 2808U，ACVM4908U，ACVM4708U，ACVS4109W，ACVS3107W}}）;



//新数据收集

// var series = new Collection< serie>（）;

var series = new List< serie>（）;

series.Add（new Serie {data = new object [] {299,200,378,328,403,334,328,328,330,294}}）;



//将数据绑定到图表

hcLinechart.DataSource = series;

hcLinechart.DataBind（）;

#endregion



#region柱形图

hcColumnChart.Title =新标题（评级详情）;

hcColumnChart.SubTitle =新的SubTitle（来源：AiMedia Live ）;



// Axis

hcColumnChart.Y Axis.Add（new YAxisItem {title = new Title（Ratings）}）;

hcColumnChart.XAxis.Add（new XAxisItem

{

categories = new [] {ACVM2908U，ACVM4998U，ACVS3109W，ACVS3308W，ACVS3509W，ACVM2808U，ACVM4908U，ACVM4708U，ACVS4109W，ACVS3107W}

}）;





//数据

series = new List< serie> ;（）;

series.Add（新系列

{

name =Items，

数据= new Object [] {299,200,378,328,403,334,328,328,330,294}

}）;



hcColumnChart.PlotOptions = new PlotOptionsColumn {borderColor =＃dedede，borderRadius = 4};

hcColumnChart。工具提示=新工具提示（''+ this.series.name +'
'+ this.x +'：'+ this.y +''）;



// Bind

hcColumnChart.DataSource = series;

hcColumnChart.DataBind（）;

#endregion



#region饼图

hcPieChart.Title =新标题（评级详情）;



//数据

series = new List< serie>（）;

series.Add（new Serie

{

size = 130，



data = new object [] {

new object [] {ACVM2908U，9.28}，

新对象[] {ACVM4998U，6.21}，

新o bject [] {ACVS3109W，11.73}，

新对象[] {ACVS3308W，10.18}，

新对象[] {ACVS3509W，12.51} ，

新对象[] {ACVM2808U，10.37}，

新对象[] {ACVM4908U，10.18}，

new object [] {ACVM4708U，10.18}，

new object [] {ACVS4109W，10.24}，

new object [] {ACVS3107W，9.12}

}

}）;



hcPieChart.PlotOptions = new PlotOptionsPie

{

allowPointSelect = true，

cursor =pointer，

dataLabels = new DataLabels {enabled = true}

};



hcPieChart.Tooltip =新工具提示（''+ this.point.name +'：'+ this.y + '％'）;

hcPieChart.Theme =pink-floral;



// Bind

hcPieChart.DataSource = series;

hcPieChart.DataBind（）;

#endregion



#region Area样条图

//标题

hcAreaSplineChart.Title =新标题（评级详情）;



// definining axis

hcAreaSplineChart.YAxis.Add（new YAxisItem {title = new Title（Rating Details）}）;

hcAreaSplineChart.XAxis.Add（new XAxisItem {categories = new [] {ACVM2908U，ACVM4998U，ACVS3109W，ACVS3308W，ACVS3509W，ACVM2808U，ACVM 4908U，ACVM4708U，ACVS4109W，ACVS3107W}}）;



//数据

series = new List< serie>（）;

series.Add（new Serie {name =Ratings，data = new object [] {299,200,378,328,403,334,328,328,330 ，294}}）;



hcAreaSplineChart.PlotOptions = new PlotOptionsAreaSpline {stacked = Stacking.normal，fillOpacity = 0.3};



//自定义工具提示

hcAreaSplineChart.Tooltip = new ToolTip（this.x +'：'+ this.y +''）;



//自定义传奇

hcAreaSplineChart.Legend = new Legend

{

layout = Layout。水平，

borderWidth = 3，

align = Align.cente r，

verticalAlign = Highchart.Core.VerticalAlign.bottom，

shadow = true //，

// backgroundColor =＃e3e6be

};



// bind

hcAreaSplineChart.DataSource = series;

hcAreaSplineChart.DataBind（）;

#endregion



#region折线图 - 主题

hcLineChartTheme.Title =新标题（评级详情）;

//hcLineChartTheme.SubTitle =新的子标题（总收入）;



/ /定义轴

hcLineChartTheme.YAxis.Add（new YAxisItem {title = new Title（Ratings）}）;

//hcLineChartTheme.XAxis.Add(newXAxisItem {categories = new [] {1994，1995，1996，1997，1998，1999，2000，2001，2002}}）;

hcLineChartTheme.XAxis.Add（new XAxisItem {categories = new [] {ACVM2908U，ACVM4998U，ACVS3109W，ACVS3308W，ACVS3509W，ACVM2808U，ACVM4908U，ACVM4708U，ACVS4109W ，ACVS3107W}}）;



//新数据收集

// var series = new Collection< serie>（） ;

series = new List< serie>（）;

series.Add（new Serie {data = new object [] {299,200,378,328,403 ，334,328,328,330,294}，name =Ratings}）;

//series.Add(new Serie {data = new object [] {254,402,576， 85,257,684,601,410,543}，name =Clothing}）;

//series.Add(new Serie {data = new object [] {125,471,247 ，120,397,451}，name =Sports}）;



hc LineChartTheme.Theme =gray;

hcLineChartTheme.Legend = new Legend {align = Align.center，layout = Layout.horizo​​ntal，verticalAlign = Highchart.Core.VerticalAlign.bottom，borderWidth = 0};

//hcLineChartTheme.Appearance = new Appearance {marginBottom = 30，marginRight = 130，borderRadius = 15};



//绑定数据to chart

hcLineChartTheme.DataSource = series;

hcLineChartTheme.DataBind（）;

#endregion



#region散点图 - 主题

hcScatterChart.Title =新标题（评级详情））;

//hcScatterChart.SubTitle = new SubTitle （总收入）;



//定义轴

hcScatterChart.YAxis.Add（new YAxisItem { title = new Title（Rating Details）}）;

hcScatterChart.XAxis.Add（new XAxisItem {categories = new [] {ACVM2908U，ACVM4998U，ACVS3109W，ACVS3308W ，ACVS3509W，ACVM2808U，ACVM4908U，ACVM4708U，ACVS4109W，ACVS3107W}}）;



//新数据收集

// var series = new Collection< serie>（）;

series = new List< serie>（）;

series.Add （新的Serie {data = new object [] {299,200,378,328,403,334,328,328,330,294}，name =Ratings}）;

series。添加（新系列{data = new object [] {400,435,446,479,554,634,687,750,831}，name =Rating 2}）;





hcScatterChart.Theme =grey;

hcScatterChart.Legend = new Legend {align = Align.center，layout = Layout.horizo​​ntal， verticalAlign = Highchart.Core.VerticalAlign.bottom，borderWidth = 0};

//hcLineChartTheme.Appearance = new Appearance {marginBottom = 30，marginRight = 130，borderRadius = 15};



//将数据绑定到图表

hcScatterChart.DataSource = series;

hcScatterChart.DataBind（）;

#endregion

}

catch（例外）

{



}

终于

{

DeleteImages（）;

}

}

}



//删除临时png文件的方法

private void DeleteImages（）

{

string str =;

试试

{

str = AppDomain.CurrentDomain.BaseDirectory;

if（！String.IsNullOrEmpty（str））

{

DirectoryInfo d = new DirectoryInfo（str）; //假设测试是你的文件夹

FileInfo [] Files = d.GetFiles（*。png） ; //获取文本文件

foreach（文件中的FileInfo文件）

{

string temp = str + file;

if（temp.EndsWith（png））

{

File.Delete（temp）;

}

}

}

}

catch（IOException ee）< br $>
{



}

}

}




Code Behind File (.cs):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Highchart.Core;
using Highchart.Core.Data.Chart;
using Highchart.Core.PlotOptions;
using Highchart.Core.Appearance;
using System.IO;

public partial class Default3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
try
{
#region Line chart
// Title
hcLinechart.Title = new Title("Rating Details");
//Defining Axis
hcLinechart.YAxis.Add(new YAxisItem { title = new Title("Ratings") });
hcLinechart.XAxis.Add(new XAxisItem { categories = new[] { "ACVM2908U", "ACVM4998U", "ACVS3109W", "ACVS3308W", "ACVS3509W", "ACVM2808U", "ACVM4908U", "ACVM4708U", "ACVS4109W", "ACVS3107W" } });

//New data collection
//var series = new Collection<serie>();
var series = new List<serie>();
series.Add(new Serie { data = new object[] { 299, 200, 378, 328, 403, 334, 328, 328, 330, 294 } });

//bind data to chart
hcLinechart.DataSource = series;
hcLinechart.DataBind();
#endregion

#region Column chart
hcColumnChart.Title = new Title("Rating Details");
hcColumnChart.SubTitle = new SubTitle("Source: AiMedia Live");

// Axis
hcColumnChart.YAxis.Add(new YAxisItem { title = new Title("Ratings") });
hcColumnChart.XAxis.Add(new XAxisItem
{
categories = new[] { "ACVM2908U", "ACVM4998U", "ACVS3109W", "ACVS3308W", "ACVS3509W", "ACVM2808U", "ACVM4908U", "ACVM4708U", "ACVS4109W", "ACVS3107W" }
});


// Data
series = new List<serie>();
series.Add(new Serie
{
name = "Items",
data = new Object[] { 299, 200, 378, 328, 403, 334, 328, 328, 330, 294 }
});

hcColumnChart.PlotOptions = new PlotOptionsColumn { borderColor = "#dedede", borderRadius = 4 };
hcColumnChart.Tooltip = new ToolTip("''+ this.series.name +'
' + this.x + ': '+ this.y +''");

// Bind
hcColumnChart.DataSource = series;
hcColumnChart.DataBind();
#endregion

#region Pie chart
hcPieChart.Title = new Title("Rating Details");

//Data
series = new List<serie>();
series.Add(new Serie
{
size = 130,

data = new object[] {
new object[] { "ACVM2908U", 9.28 },
new object[] { "ACVM4998U", 6.21 },
new object[] { "ACVS3109W", 11.73 },
new object[] { "ACVS3308W", 10.18 },
new object[] { "ACVS3509W", 12.51 },
new object[] { "ACVM2808U", 10.37 },
new object[] { "ACVM4908U", 10.18 },
new object[] { "ACVM4708U", 10.18 },
new object[] { "ACVS4109W", 10.24 },
new object[] { "ACVS3107W", 9.12 }
}
});

hcPieChart.PlotOptions = new PlotOptionsPie
{
allowPointSelect = true,
cursor = "pointer",
dataLabels = new DataLabels { enabled = true }
};

hcPieChart.Tooltip = new ToolTip("''+ this.point.name +': '+ this.y +' %'");
hcPieChart.Theme = "pink-floral";

// Bind
hcPieChart.DataSource = series;
hcPieChart.DataBind();
#endregion

#region Area Spline chart
//Title
hcAreaSplineChart.Title = new Title("Rating Details");

//definining axis
hcAreaSplineChart.YAxis.Add(new YAxisItem { title = new Title("Rating Details") });
hcAreaSplineChart.XAxis.Add(new XAxisItem { categories = new[] { "ACVM2908U", "ACVM4998U", "ACVS3109W", "ACVS3308W", "ACVS3509W", "ACVM2808U", "ACVM4908U", "ACVM4708U", "ACVS4109W", "ACVS3107W" } });

//Data
series = new List<serie>();
series.Add(new Serie { name = "Ratings", data = new object[] { 299, 200, 378, 328, 403, 334, 328, 328, 330, 294 } });

hcAreaSplineChart.PlotOptions = new PlotOptionsAreaSpline { stacking = Stacking.normal, fillOpacity = 0.3 };

//customizing the tooltip
hcAreaSplineChart.Tooltip = new ToolTip("this.x +': '+ this.y +''");

//customizing the legend
hcAreaSplineChart.Legend = new Legend
{
layout = Layout.horizontal,
borderWidth = 3,
align = Align.center,
verticalAlign = Highchart.Core.VerticalAlign.bottom,
shadow = true //,
//backgroundColor = "#e3e6be"
};

//bind
hcAreaSplineChart.DataSource = series;
hcAreaSplineChart.DataBind();
#endregion

#region Line chart - theme
hcLineChartTheme.Title = new Title("Rating Details");
//hcLineChartTheme.SubTitle = new SubTitle("Gross Revenue");

//Defining Axis
hcLineChartTheme.YAxis.Add(new YAxisItem { title = new Title("Ratings") });
//hcLineChartTheme.XAxis.Add(new XAxisItem { categories = new[] { "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002" } });
hcLineChartTheme.XAxis.Add(new XAxisItem { categories = new[] { "ACVM2908U", "ACVM4998U", "ACVS3109W", "ACVS3308W", "ACVS3509W", "ACVM2808U", "ACVM4908U", "ACVM4708U", "ACVS4109W", "ACVS3107W" } });

//New data collection
//var series = new Collection<serie>();
series = new List<serie>();
series.Add(new Serie { data = new object[] { 299, 200, 378, 328, 403, 334, 328, 328, 330, 294 }, name = "Ratings" });
//series.Add(new Serie { data = new object[] { 254, 402, 576, 85, 257, 684, 601, 410, 543 }, name = "Clothing" });
//series.Add(new Serie { data = new object[] { 125, 471, 247, 120, 397, 451 }, name = "Sports" });

hcLineChartTheme.Theme = "gray";
hcLineChartTheme.Legend = new Legend { align = Align.center, layout = Layout.horizontal, verticalAlign = Highchart.Core.VerticalAlign.bottom, borderWidth = 0 };
//hcLineChartTheme.Appearance = new Appearance { marginBottom = 30, marginRight = 130, borderRadius = 15 };

//bind data to chart
hcLineChartTheme.DataSource = series;
hcLineChartTheme.DataBind();
#endregion

#region Scatter chart - theme
hcScatterChart.Title = new Title("Rating Details)");
//hcScatterChart.SubTitle = new SubTitle("Gross Revenue");

//Defining Axis
hcScatterChart.YAxis.Add(new YAxisItem { title = new Title("Rating Details") });
hcScatterChart.XAxis.Add(new XAxisItem { categories = new[] { "ACVM2908U", "ACVM4998U", "ACVS3109W", "ACVS3308W", "ACVS3509W", "ACVM2808U", "ACVM4908U", "ACVM4708U", "ACVS4109W", "ACVS3107W" } });

//New data collection
//var series = new Collection<serie>();
series = new List<serie>();
series.Add(new Serie { data = new object[] { 299, 200, 378, 328, 403, 334, 328, 328, 330, 294 }, name = "Ratings" });
series.Add(new Serie { data = new object[] { 400, 435, 446, 479, 554, 634, 687, 750, 831 }, name = "Rating 2" });


hcScatterChart.Theme = "gray";
hcScatterChart.Legend = new Legend { align = Align.center, layout = Layout.horizontal, verticalAlign = Highchart.Core.VerticalAlign.bottom, borderWidth = 0 };
//hcLineChartTheme.Appearance = new Appearance { marginBottom = 30, marginRight = 130, borderRadius = 15 };

//bind data to chart
hcScatterChart.DataSource = series;
hcScatterChart.DataBind();
#endregion
}
catch (Exception)
{

}
finally
{
DeleteImages();
}
}
}

// Method to delete temporary png files
private void DeleteImages()
{
string str = "";
try
{
str = AppDomain.CurrentDomain.BaseDirectory;
if (!String.IsNullOrEmpty(str))
{
DirectoryInfo d = new DirectoryInfo(str);//Assuming Test is your Folder
FileInfo[] Files = d.GetFiles("*.png"); //Getting Text files
foreach (FileInfo file in Files)
{
string temp = str + file;
if (temp.EndsWith("png"))
{
File.Delete(temp);
}
}
}
}
catch (IOException ee)
{

}
}
}

这篇关于Highchart上下文菜单显示两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆