Question

我使用谷歌图表创建了贝尔曲线图表，但现在问题是，我必须将条形图和贝尔曲线图组合在一起，如下图所示，或者您可以查看this link

贝尔曲线图代码： -

  function drawChart() {

            var data = new google.visualization.DataTable();

            data.addColumn('number', 'X Value');

            data.addColumn('number', 'Y Value');

            function NormalDensityZx(x, Mean, StdDev) {

                var a = x - Mean;

                return Math.exp(-(a * a) / (2 * StdDev * StdDev)) / (Math.sqrt(2 * Math.PI) * StdDev);

            }

            var chartData = new Array([]);

            var index = 0;

            for (var i = -20; i < 50; i += 1) {

                chartData[index] = new Array(2);

                chartData[index][0] = i;

                chartData[index][1] = NormalDensityZx(i, 20, 10);
              
                index++;

            }
            
            data.addRows(chartData);

            //options = { height: 500, width: 800, legend: 'none' };

            //options.hAxis = {};

            //options.hAxis.minorGridlines = {};

            //options.hAxis.minorGridlines.count = 12;

            var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));

            chart.draw(data, {
                height: 700, width: 1200, legend: 'none', annotation: {
                    // index here is the index of the DataTable column providing the annotation
                    1: {
                        style: 'line'
                    }
                } });

        }

        google.load('visualization', '1', { packages: ['corechart'], callback: drawChart });

<!DOCTYPE html>

<html>

<head>
    <title>http://exceluser.com/downloads/examples/post_900_102/index.htmlt</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script src="http://www.google.com/jsapi?ext.js"></script>
</head>
<body class="chart">
    <div id="chart_div"></div>
</body>

</html>

Answer 1

ComboChart允许组合不同类型的系列

在选项中，为默认类型提供seriesType 然后使用series选项为特定系列分配不同类型例如

    seriesType: 'area',
    series: {
      1: {
        type: 'bars'
      }
    }

系列0将是数据表中的第一个y轴列

请参阅以下工作代码段...

为每第五个数据点添加一个条

google.charts.load('current', {
    callback: drawChart,
    packages: ['corechart']
});

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X Value');
    data.addColumn('number', 'Y Value');
    data.addColumn('number', 'Columns');

    function NormalDensityZx(x, Mean, StdDev) {
        var a = x - Mean;
        return Math.exp(-(a * a) / (2 * StdDev * StdDev)) / (Math.sqrt(2 * Math.PI) * StdDev);
    }

    var chartData = new Array([]);
    var index = 0;
    for (var i = -20; i < 50; i += 1) {
        chartData[index] = new Array(2);
        chartData[index][0] = i;
        chartData[index][1] = NormalDensityZx(i, 20, 10);

        // add bars
        if ((i % 5) === 0) {
          chartData[index][2] = NormalDensityZx(i, 20, 10);
        } else {
          chartData[index][2] = null;
        }

        index++;
    }

    data.addRows(chartData);
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, {
        height: 700,
        legend: 'none',
        seriesType: 'area',
        series: {
          1: {
            type: 'bars'
          }
        },
        width: 1200
    });
}

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

注意

建议不使用jsapi加载Google图表
它是旧版本，根据release notes ...

通过jsapi加载程序保留的Google图表版本不再一致更新。请从现在开始使用新的gstatic loader.js。

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

这只会更改load语句，请参阅上面的代码段...

将谷歌贝尔曲线图和条形图合二为一

1 个答案: