Highcharts 定制 PHP/MySQL

Posted 2023-02-24

【中文标题】Highcharts 定制 PHP/MySQL

【英文标题】：Highcharts customization PHP/MySQL

【发布时间】：2012-04-22 11:38:25

【问题描述】：

我正在尝试自定义图表并向我们的客户提供演示以供他们批准。

我们现在面临的一些最终问题是，

问题：在柱状图的高图中是否可以分页。假设我们有 50 或 100 列。

我们怎样才能避免我们的图表变得拥挤。

例如看看这个 js fiddle

http://jsfiddle.net/justin69/4xSNU/1/

问题：如果我们在图表中嵌入图像或徽标并尝试使用jpg/jpeg 将其导出，则会出现错误。

在 jsfidlle 上它可以工作，

但在我们的本地主机上，它会给出以下错误消息。

About to transcode 1 SVG file(s) Converting 551bc090a93c120f987375135e7744db.svg to temp/551bc090a93c120f987375135e7744db.jpg ... ... error ( SVGConverter.error.while.rasterizing.file) Error while converting SVG. SVG code for debugging:

【问题讨论】：

实际上我想禁用图例单击列向下钻取，但是在我向下钻取并再次启用图例单击后，图例消失了:(

你能编辑你的问题并删除那些代码块吗？很难阅读！

@Flukey 是的，现在改进了格式:)

【参考方案1】：

1.拥挤的图表

a.您是否尝试过旋转标签？这将显着减少您之前拥有的标签上的过度拥挤。

这是你的 Fiddle with label mod：http://jsfiddle.net/kayen/YSwk4/

b. 如果您有很多值并且受 x 轴上的空间限制，您可以将 柱形 类型的图表转换为 条形型图表。

这是您的 Fiddle 条形图 mod：http://jsfiddle.net/kayen/QqPha/

我建议使用第一个选项，因为您可以在同一空间中容纳更多的值，并且图表更清晰。

【讨论】：

对不起，新的用户限制，所以无法将第二部分发布到上面的原始答案中。 2。导出图像 您是否在导出中启用了图像？查看 Highcharts 演示，用于导出嵌入了外部图像的图表：jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/…希望这些步骤对您有用！

更新我相信滚动功能可用于 Highcharts，但您必须使用 Highchart 的 highstock.js。这是我发现你的一个类似问题：***.com/questions/8518686/…

另一种方法是创建您自己的自定义分页 - 将系列分成一半或您想要的部分（例如每个图表 30 个值）。然后在图表容器之后添加两个超链接，Previous 和 Next。单击这些按钮基本上会调用相同的图表，但使用新的数据集。我会尝试为此创建一个小提琴，但你为什么不试一试！

是的，我之前尝试过旋转标签 :) 但在正常情况下怎么做。旋转不是我的选择。

感谢您的条形图想法对我真的有帮助，我会研究一下 :)

【参考方案2】：

看看能不能帮到你……

“图表拥挤”

我可以想象三种避免图表“拥挤”的方法：

方法一：让用户选择看什么。

隐藏将visible: false 添加到您的部分或全部系列中，使用它可以让用户选择他想查看的数据。例如：

series: [
            
                name: ...,
                data: ...,
                visible: false
            ,
            ...
        ]

---

如果您选择此示例，您还可以考虑添加一个按钮来显示/隐藏全部，您可以通过以下方式实现：

隐藏所有内容：

for(i=0; i < chart.series.length-1; i++)
    chart.series[i].hide();

显示所有内容：

for(i=0; i < chart.series.length-1; i++)
    chart.series[i].show();

---

方法 2：解决问题

替代方案您可以在图表中使用zoomType: 'x'，允许用户缩放并查看详细数据，然后用户可以滚动缩放到图表的左右两侧或重置缩放并选择另一个要查看的点。

---

方法三：溢出

替代方案您可以创建一个巨大的图表并使用溢出来允许图表 div 可滚动，或者隐藏溢出并通过 jQuery 管理 scrollX 和 scrollY 槽。

---

您能否提供 svg 示例的代码或链接，以便我检查您的代码，看看是否可以帮助您？

谢谢。

【讨论】：

嗨，如果你能展示怎么做，我已经添加了一个小提琴:) 我是新手，所以

你的巨型图表可以容纳所有数据，但我们需要拥有 400*400 像素的所有数据。所以这是不可能的。

我会喜欢某种滚动条，就像他们拥有的 highstock 一样。如果图表很拥挤，我希望在 highcharts 中也能实现这一点。我赞成你的答案会尝试其他两个你能调整我的小提琴吗

你好@Rinzler，我很快就会更新我的答案。让我检查一下。谢谢。