jquery - 将谷歌贝尔曲线图和条形图合二为一-6ren

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

转载作者：行者123 更新时间：2023-12-01 04:00:25

我已经使用 Google 图表创建了钟形曲线图，但现在的问题是，我必须将条形图和钟形曲线图结合起来，如下图所示，或者您可以检查 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>

最佳答案

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加载谷歌图表
这是一个旧版本，根据 release notes ...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.

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

这只会改变load声明，请参阅上面的代码片段...

关于jquery - 将谷歌贝尔曲线图和条形图合二为一，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46344975/