canvas - Google line chart(interactive) api - 我们如何在指定区域填充不同的背景颜色

Question

我需要在指定区域的谷歌折线图中水平填充背景颜色。我查看了所有的 api，但没有得到解决方案。谷歌图像图表（我认为它已被弃用）有一些属性，但我使用的是交互式图表。我只是附上我真正想要的图像。

请帮忙。

Answer 1

您可以通过使用 ComboChart 而不是 LineChart 并添加一些额外的数据系列来做到这一点。在您的示例中，您将有 3 个额外的系列，每行的值分别为 800、1000 和 1200。然后您设置“系列”选项以使这些“区域”系列不会出现在图例中，并且当您将鼠标悬停在它们上方时不会产生工具提示：

series: {
    0: {
        type: 'line'
    },
    1: {
        type: 'line'
    },
    2: {
        lineWidth: 0,
        type: 'area',
        visibleInLegend: false,
        enableInteractivity: false
    },
    3: {
        lineWidth: 0,
        type: 'area',
        visibleInLegend: false,
        enableInteractivity: false
    },
    4: {
        lineWidth: 0,
        type: 'area',
        visibleInLegend: false,
        enableInteractivity: false
    }
}

在此处查看示例：http: //jsfiddle.net/asgallant/apH2B/