高图表气泡图的不同形状

Question

我们如何自定义HighChart的气泡图来拥有不同的形状。

就像如果我们表示4个不同的事件类型，我们不仅需要4种不同的颜色的气泡，而且每个气泡都有不同的形状，如圆形，三角形，方形等。

是可能的HighCharts，如果是这样，谁能提供小的例子?

如果它是不可能的，那么哪个JS工具包是最好的图表定制?

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
$('#container').highcharts({
                chart: {
                    type: 'bubble',
                    zoomType: 'xy'
                },
                plotOptions: {
                    bubble: {
                        tooltip: {
                            headerFormat: '<b>Sai {series.name}</b><br>',
                            pointFormat: '{point.x} fatalities, {point.y} injured, {point.z}  total Sai'
                        }
                    }
                },
                title: {
                    text: 'Highcharts Bubbles'
                },
                series: [{
                    data: [[97, 36, 79], [94, 74, 60], [68, 76, 58], [64, 87, 56], [68, 27, 73], [74, 99, 42], [7, 93, 87], [51, 69, 40], [38, 23, 33], [57, 86, 31]]
                }, {
                    data: [[25, 10, 87], [2, 75, 59], [11, 54, 8], [86, 55, 93], [5, 3, 58], [90, 63, 44], [91, 33, 17], [97, 3, 56], [15, 67, 48], [54, 25, 81]]
                }, {
                    data: [[47, 47, 21], [20, 12, 4], [6, 76, 91], [38, 30, 60], [57, 98, 64], [61, 17, 80], [83, 60, 13], [67, 78, 75], [64, 12, 10], [30, 77, 82]]
                }]
            });

Answer 1

您可以使用散点系列和定义标记来代替气泡。

series: [{
        marker: {
            radius:5,
            symbol: 'triangle'
        },
        data: [
            [97, 36],
            [94, 74]
        ]
    }, {
        marker: {
            radius:5,
            symbol: 'circle'
        },
        data: [
            [25, 10],
            [2, 75]
        ]
    }, {
         marker: {
            radius:5,
            symbol: 'diamond'
        },
        data: [
            [47, 47],
            [20, 12]
        ]
    }]

示例:http://jsfiddle.net/qL9ap8po/