自定义高级图表

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]

如果我是你，我会深入研究 highchart api，它是一个很棒的库，提供了修改图表所需的几乎所有类型的功能。