Javascript 谷歌折线图上的趋势线

我试图找出如何将趋势线添加到我的谷歌折线图中，但失败惨重。有人能给我指出正确的方向吗？我已经看到谷歌没有提供一种在折线图上实现这一点的方法，但也看到有可能在图表中添加一个新的系列来实现类似的效果。这里是我到目前为止所做的，除了没有趋势线之外，效果还不错。我尝试了一些在网上找到的建议，但没有一个能清晰地计算出趋势线是一条直线：

function drawChartCustomerRevenue_93() {
    var revenueChart_93;
    var data = new google.visualization.DataTable();
    data.addColumn('string', Date);
    data.addColumn('number', 'Sales Value');
    data.addRow(['Apr 2013', 271176.940000000]);
    data.addRow(['May 2013', 419031.540000000]);
    data.addRow(['Jun 2013', 429155.540000000]);
    data.addRow(['Jul 2013', 443780.400000000]);
    data.addRow(['Aug 2013', 320353.540000000]);
    data.addRow(['Sep 2013', 310640.910000000]);
    data.addRow(['Oct 2013', 252187.700000000]);
    data.addRow(['Nov 2013', 301414.560000000]);
    data.addRow(['Dec 2013', 224296.850000000]);
    data.addRow(['Jan 2014', 291131.140000000]);
    data.addRow(['Feb 2014', 354750.680000000]);
    data.addRow(['Mar 2014', 312736.710000000]);
    var formatter = new google.visualization.NumberFormat({
        fractionDigits: 2,
        prefix: '£'
    });
    formatter.format(data, 1);
    var chartHeight = 400;
    var chartWidth = 500;
    var chartOptions = {
        trendlines: {
            {
                color: 'green',
            }
        },
        title: '1: TEST NAME',
        isStacked: true,
        width: chartWidth,
        height: chartHeight,
        colors: ['#0000D4'],
        hAxis: {
            title: 'Sales Value (£)',
            slantedText: true,
            slantedTextAngle: 45,
            textStyle: {
                fontSize: 10
            },
        },
        chartArea: {
            left: 100,
            top: 20,
            width: (chartWidth - 10),
            height: (chartHeight - 90)
        }
    };
    revenueChart_93 = new google.visualization.LineChart(document.getElementById('CustomerRevenue_93'));
    revenueChart_93.draw(data, chartOptions);
};
drawChartCustomerRevenue_93();

编辑：

我现在尝试将代码放入建议中，但仍然没有显示趋势线：

function drawChartCustomerRevenue_93() {
    var revenueChart_93;
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Sales Value');
    data.addRow([new Date(2013, 4, 1), 184656.440000000]);
    data.addRow([new Date(2013, 5, 1), 420286.250000000]);
    data.addRow([new Date(2013, 6, 1), 431562.840000000]);
    data.addRow([new Date(2013, 7, 1), 446187.800000000]);
    data.addRow([new Date(2013, 8, 1), 320353.540000000]);
    data.addRow([new Date(2013, 9, 1), 313364.960000000]);
    data.addRow([new Date(2013, 10, 1), 252187.700000000]);
    data.addRow([new Date(2013, 11, 1), 303874.560000000]);
    data.addRow([new Date(2013, 12, 1), 224296.850000000]);
    data.addRow([new Date(2014, 1, 1), 297499.970000000]);
    data.addRow([new Date(2014, 2, 1), 354950.680000000]);
    data.addRow([new Date(2014, 3, 1), 315529.610000000]);
    data.addRow([new Date(2014, 4, 1), 145219.710000000]);
    var formatter = new google.visualization.NumberFormat({
        fractionDigits: 2,
        prefix: '£'
    });
    formatter.format(data, 1);
    var dateFormatter = new google.visualization.NumberFormat({
        pattern: 'MMM yyyy'
    });
    dateFormatter.format(data, 0);
    var chartHeight = 320;
    var chartWidth = 400;
    var chartOptions = {
        trendlines: {
            0: {
                color: 'green'
            }
        },
        title: '1: Test Name',
        isStacked: true,
        width: chartWidth,
        height: chartHeight,
        colors: ['#0000D4'],
        hAxis: {
            title: 'Sales Value (£)',
            slantedText: true,
            slantedTextAngle: 45,
            textStyle: {
                fontSize: 10
            },
            format: 'MMM yyyy',
        },
        chartArea: {
            left: 100,
            top: 20,
            width: (chartWidth - 8),
            height: (chartHeight - 72)
        }
    };
    revenueChart_93 = new google.visualization.LineChart(document.getElementById('CustomerRevenue_93'));
    revenueChart_93.draw(data, chartOptions);
};
drawChartCustomerRevenue_93();

请查看：

---

这表示您的第一列不能是字符串，因为它不是连续的域轴

首先，正如@mcgyver5所指出的，离散（基于字符串的）轴不支持趋势线。因为您的数据是每月一次的，所以您可以切换到日期轴而不是字符串轴，这将解决该问题。此外，您的

趋势线

选项未正确指定

以下是修复这两个问题的示例：

function drawChartCustomerRevenue_93() {
    var revenueChart_93;
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Sales Value');
    data.addRow([new Date(2013, 3, 1), 271176.940000000]);
    data.addRow([new Date(2013, 4, 1), 419031.540000000]);
    data.addRow([new Date(2013, 5, 1), 429155.540000000]);
    data.addRow([new Date(2013, 6, 1), 443780.400000000]);
    data.addRow([new Date(2013, 7, 1), 320353.540000000]);
    data.addRow([new Date(2013, 8, 1), 310640.910000000]);
    data.addRow([new Date(2013, 9, 1), 252187.700000000]);
    data.addRow([new Date(2013, 10, 1), 301414.560000000]);
    data.addRow([new Date(2013, 11, 1), 224296.850000000]);
    data.addRow([new Date(2014, 0, 1), 291131.140000000]);
    data.addRow([new Date(2014, 1, 1), 354750.680000000]);
    data.addRow([new Date(2014, 2, 1), 312736.710000000]);
    var formatter = new google.visualization.NumberFormat({
        fractionDigits: 2,
        prefix: '£'
    });
    formatter.format(data, 1);
    var dateFormatter = new google.visualization.NumberFormat({
        pattern: 'MMM yyyy'
    });
    dateFormatter.format(data, 0);
    var chartHeight = 400;
    var chartWidth = 500;
    var chartOptions = {
        trendlines: {
            0: {
                color: 'green'
            }
        },
        title: '1: TEST NAME',
        isStacked: true,
        width: chartWidth,
        height: chartHeight,
        colors: ['#0000D4'],
        hAxis: {
            title: 'Sales Value (£)',
            slantedText: true,
            slantedTextAngle: 45,
            textStyle: {
                fontSize: 10
            },
            format: 'MMM yyyy'
        },
        chartArea: {
            left: 100,
            top: 20,
            width: (chartWidth - 10),
            height: (chartHeight - 90)
        }
    };
    revenueChart_93 = new google.visualization.LineChart(document.getElementById('CustomerRevenue_93'));
    revenueChart_93.draw(data, chartOptions);
}

---

看到它在这里工作：

可能重复我逐字实现了你的示例，但是我仍然没有得到趋势线。我注意到我没有收到错误：/Common/JavaScripts/GoogleChartApi/static/modules/gviz/1.0/orgchart/orgchart.css 404（未找到）。我看了一下，我确实错过了这个css类。我似乎找不到我可以从哪里下载这个。关于我在哪里可以找到它，你有什么建议吗？如果你遵循我的代码示例，你应该有一个趋势线。用你现在使用的代码更新你的问题，我来看看。至于丢失的文件，你在某处使用组织结构图吗？如果没有，你就不需要那个CSS文件。我已经把你显示的代码添加到我的页面上，但是它仍然没有显示趋势线。我收到一个关于缺少名为orgchart.css的css文件的错误。我在代码中看到您直接调用

drawChartCustomerRevenue\u 93

，而不是使用来自google loader的回调，如JSFIDLE示例中所示。您需要等待API加载后才能使用任何组件。更改代码以从google loader绘制回调，如下所示：

google.load（'visualization'，'1'，{packages:['corechart']，回调：drawChartCustomerRevenue93}）。