高层图有多灵活？ （附Mockup。） [英] Just how flexible is highcharts? (Mockup attached.)

问题描述

我们已经完成了一些我们想要在我们的网站上添加的图表模型，如果我们可以使用Highcharts，我们会很高兴。但是我们看到的很多Highcharts工作看起来都很相似......

Highcharts的定制化程度如何？我们是否可以用它来创建像这些模型一样的 的图表？例如。

• 移动平均线


• 有吸引力的点表示高低
  
• 纯粹的装饰性渐变


• 钥匙叠加层显示了什么颜色线代表什么
  

那你觉得呢？是Highcharts达到这个确切的工作，只要我们拥有足够的Javascript&造型？

样机： http://cl.ly/ image / 1f0m3l241e2S

解决方案

是的，您绝对可以用HighCharts来做这些事情！我在这里工作的座右铭是任何事都有可能。

对于指示高点和低点的点，您将希望使用符号作为点例如在本例中找到： http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/spline-symbols/

  data：[7.0，6.9，9.5，14.5，18.2，21.5，25.2，{
y： 26.5，
标记：{
符号：'url（http://www.highcharts.com/demo/gfx/sun.png）'
} 
}，23.3， 18.3，13.9，9.6] 
  

对于渐变，您可以使用SVG的线性渐变将其附加到背景颜色。这里有一个例子： http://jsfiddle.net/WNDUH/10/ 你要去的是什么要改变不透明度和颜色（还要摆弄300以获得高度）：

  fillColor：{
 linearGradient：[0,0,0,300]，
 stops：[
 [0，Highcharts.getOptions（）。colors [0]]，
 [1，'rgba（2,0,0,0）'] 
] 
}，
  

至于关键覆盖图，那是您的标准传奇，就像这样完全定位： http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/ highcharts.com/tree/master/samples/highcharts/demo/bar-basic/

  legend：{
布局：'垂直'，
阿里gn：'right'，
 verticalAlign：'top'，
x：-100，
y：100，
 floating：true，
 borderWidth：1，
 backgroundColor：'#FFFFFF'，
 shadow：true 
}，
  

至于移动平均线，这基本上是它自己的计算系列。

像@nathancahill说有一条学习曲线，但它看起来像你问题可以在HighCharts没有黑客攻击的情况下完成。

希望能帮助你！

We've done some mockups of charts we want to include on our website, and we'd be thrilled if we could use Highcharts. But so many of the Highcharts work we see looks fairly identical...

Just how customizable is Highcharts? Could we conceivably use it to create charts that look exactly like these mockups? E.g. with

• Moving averages
• Attractive dots indicating the high and low
• Purely decorative gradients
• "Key" overlay showing what color line represents what

So what do you think? Is Highcharts up to this exact job provided we hack up enough Javascript & styling?

Mockup: http://cl.ly/image/1f0m3l241e2S

解决方案

Yes, you can definitely do those things with HighCharts! The motto around my work here is "anything is possible."

For the dots indicating the highs and lows, you are going to want to use "symbols" for the points such as found in this example: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/spline-symbols/

data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
                y: 26.5,
                marker: {
                    symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
                }
            }, 23.3, 18.3, 13.9, 9.6]

For gradients, you can use the "linear gradient" functionality of SVG and attach it to the background color. Here's an example of that: http://jsfiddle.net/WNDUH/10/ What you are going to be working with there is the "stops" to change the opacity and color (also fiddle with the 300 to get the height right):

fillColor : {
          linearGradient : [0, 0, 0, 300],
          stops : [
            [0, Highcharts.getOptions().colors[0]],
            [1, 'rgba(2,0,0,0)']
          ]
        },

As for the key overlay, that is your standard legend, just absolutely positioned like so: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-basic/

legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -100,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: '#FFFFFF',
            shadow: true
        },

As for the moving average, that is basically going to be its own calculated series.

Like @nathancahill said there is a learning curve, but it looks like much of what you asked can be done without "hacking" anything in HighCharts.

Hope that helped you out!

这篇关于高层图有多灵活？ （附Mockup。）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！