javascript - High Chart 气泡图的不同形状

Question

我们如何定制 HighChart 的 Bubble Chart具有不同的形状。

就像我们代表 4 种不同的事件类型一样，我们不仅需要 4 种不同颜色的气泡，而且还需要每个气泡具有不同的形状，如圆形、三 Angular 形、方形等。

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/