在引擎盖下定制高级图表

Question

我正在开发一个带有highcharts的项目，并且无法在图表中定制一些详细的内容。

这是图表（根据我的需要）：

我想自定义一些标签（在红色圆圈中），使它们比其他标签更大胆。我还想改变那些点的样式（在绿色圆圈中），使它们比其他点更大（甚至用定制的SVG图代替）。

我如何实现这一目标？有什么参考我需要阅读吗？

非常感谢任何提示！

---

更新，感谢您提供了很好的建议，我向目标迈出了一步，但仍然有一些问题，如下图所示：

Answer 1

显然你可以通过highchart api实现这一目标。您可以为每个数据点指定标记。 http://api.highcharts.com/highcharts#series.data.marker

增加第一个点标记的半径：

series: [{
            name: 'Allocated Budget',
            data: [{
                name: 'Point 1',
                color: '#00FF00',
                y: 43000,
              marker: {
                    radius: 8
                }
            }, 19000, 60000, 35000, 17000, 10000],
            pointPlacement: 'on'
        }

您可以通过xAxis的label属性更改每个xaxis标签的样式。我从以下帖子中找到了答案。 Highchart - change color of one x-axis label only

更改“营销”点的字体大小

xAxis: {
        categories: ['Sales', 'Marketing', 'Development', 'Customer Support', 
                    'Information Technology', 'Administration'],
        tickmarkPlacement: 'on',
        lineWidth: 0,
        labels: {
                formatter: function () {
                    if ('Marketing' === this.value) {
                        return '<span style="fill: red;">' + this.value + '</span>';
                    } else {
                        return this.value;
                    }
                }
            }
        }

Demo

您可以根据需要修改工具提示（鼠标悬停在点上时弹出）。请看一下highchart api上的示例：

tooltip: {
            formatter: function() {
                return 'The value for <b>'+ this.x +
                    '</b> is <b>'+ this.y +'</b>';
            }
        }

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/tooltip/formatter-simple/

要更改标记的悬停样式，请查看数据系列的标记对象。以下是悬停时标记点不会发生变化的示例：

来自highchart api的示例（每个点的半径相同）：

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-marker-states-hover-radius/

在悬停示例中，将标记半径的大小保持在单个点上：

data: [{
                name: 'Point 1',
                color: '#00FF00',
                y: 43000,
              marker: {
                    radius: 8,
                   states: {
                        hover: {
                            radius: 8
                        }
                    }
                }
            }, 19000, 60000, 35000, 17000, 10000]

如果我是你，我会深入挖掘高图api，这是一个很棒的图书馆，几乎可以提供修改图表所需的任何功能。