在模态窗口中打开 Highcharts

Open Highcharts in modal window(在模态窗口中打开 Highcharts)
本文介绍了在模态窗口中打开 Highcharts的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在一个网站上工作,我大量使用 Highcharts 在图表中呈现数据.我希望用户能够将每个图表缩放"到模态窗口中以获得更好的可读性.

I'm working on a site where I use Highcharts quite heavily for presenting data in charts. I want to user to be able to "zoom" each chart into a modal window for better readability.

我知道如何使用其 API 操作图表,但我不太确定如何克隆图表并使用变量引用新图表?

I know how to manipulate the chart with its API, but I'm not quite sure how I can clone the chart and refer to the new chart with an variable?

我做了很多搜索,我发现的只是如何使用 Highcharts 自己的模态库在模态窗口中打开,但我使用的是一个名为 Lightview 的模态库.

I've done alot of searching, and all I've found is how to open in modal window with Highcharts own modal library, but I'm using a modal library called Lightview.

推荐答案

可以通过选择事件获取新的范围,然后从图表系列中获取相应的位置.看我的例子.http://jsfiddle.net/ricardolohmann/sZMFh/因此,如果您想在灯箱中显示它,您必须更改以下代码:

You can get the new range by the selection event and then get the respective position from the chart serie. See my example. http://jsfiddle.net/ricardolohmann/sZMFh/ So, if you want to show it inside the lightbox you have to change the following code:

chart2 = new Highcharts.StockChart({
    chart: {
        renderTo: 'container2'
    },
    series: newSeries
});

到这个,并将container2显示设置为none

To this one, and set the container2 display to none

Lightview.show({ url: 'container2', type: 'inline' });

这篇关于在模态窗口中打开 Highcharts的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)