0

我们已经制作了一些想要包含在我们网站上的图表模型，如果我们可以使用 Highcharts，我们会很高兴。但是我们看到的很多 Highcharts 作品看起来都差不多……

Highcharts 的可定制性如何？我们可以想象用它来创建看起来与这些模型完全一样的图表吗？例如与

  • 移动平均线
  • 指示高低的有吸引力的点
  • 纯装饰渐变
  • “关键”覆盖显示什么颜色线代表什么

所以你怎么看？如果我们破解了足够多的 Javascript 和样式，Highcharts 是否能胜任这项工作？

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

4

1 回答 1

1

是的，你绝对可以用 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,
                marker: {
                    symbol: '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: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -100,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: '#FFFFFF',
            shadow: true
        },

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

就像@nathancahill 所说的那样，有一条学习曲线，但看起来你所要求的大部分内容都可以在不“破解” HighCharts 中的任何内容的情况下完成。

希望对您有所帮助！

于 2013-03-21T14:16:59.033 回答