Question

我正在使用scatter chart from the Google visualization plugin，我正在尝试：

让每个点都有不同的颜色
每个点都有不同的形状。

我在这里看到这个通用推荐并尝试了这个：

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Age', 'Weight'],
        [8, 12],
        [4, 5.5],
        [11, 14],
        [4, 5],
        [3, 3.5],
        [6.5, 7]
    ]);

    var options = {
        series: {
            0: { pointShape: 'circle' },
            1: { pointShape: 'triangle' },
            2: { pointShape: 'square' },
            3: { pointShape: 'diamond' },
            4: { pointShape: 'star' },
            5: { pointShape: 'polygon' }
        },
        pointSize: 28,
        chartArea:{left:10,top:0,width:"96%",height:"92%"},
        'backgroundColor': 'transparent',
        hAxis: {
            baselineColor: 'transparent',
            gridlineColor: 'transparent',
             textPosition: 'none', minValue: 0, maxValue: 15
        },
        vAxis: {
            baselineColor: 'transparent',
            gridlineColor: 'transparent',
            textPosition: 'none', minValue: 0, maxValue: 15
        },
        gridlines: {
            color: 'transparent'
        },
        legend: 'none'
    };

但它似乎不适用于散点图。

散点图是否支持在每个点上具有不同颜色和形状的能力？

Answer 1

每个系列都分配到一列：

数据中的

series.0 =列1 数据中的series.1 =列2 等...

由于提供的data只有一个 Y轴列，因此所有点都属于series.0 - ＆gt; pointShape: 'circle'。

添加列并使用null填充其余部分以更改其形状每一点。请参阅以下工作代码段...

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Age', 'Weight', 'Weight', 'Weight', 'Weight', 'Weight', 'Weight'],
        [8, 12, null, null, null, null, null],
        [4, null, 5.5, null, null, null, null],
        [11, null, null, 14, null, null, null],
        [4, null, null, null, 5, null, null],
        [3, null, null, null, null, 3.5, null],
        [6.5, null, null, null, null, null, 7]
    ]);

    var options = {
        series: {
            0: { pointShape: 'circle' },
            1: { pointShape: 'triangle' },
            2: { pointShape: 'square' },
            3: { pointShape: 'diamond' },
            4: { pointShape: 'star' },
            5: { pointShape: 'polygon' }
        },
        pointSize: 28,
        chartArea:{left:10,top:0,width:"96%",height:"92%"},
        'backgroundColor': 'transparent',
        hAxis: {
            baselineColor: 'transparent',
            gridlineColor: 'transparent',
             textPosition: 'none', minValue: 0, maxValue: 15
        },
        vAxis: {
            baselineColor: 'transparent',
            gridlineColor: 'transparent',
            textPosition: 'none', minValue: 0, maxValue: 15
        },
        gridlines: {
            color: 'transparent'
        },
        legend: 'none'
    };

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

系列pointShape是否适用于Google散点图？

1 个答案: