Question

我们如何自定义HighChart的Bubble Chart以使其具有不同的形状。

如果我们代表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/

高图表泡沫图表的不同形状

1 个答案: