代码之家 › 专栏 › 技术社区 › NelbeDG

如何在谷歌图表(线型)的X轴上添加垂直线?

google-visualization charts reactjs

NelbeDG · 技术社区 · 6 年前

我有这个组件

<Chart chartType='Line' data={data} options={options} />

以下是数据和选项的值:

const data = [
        ["Year", "Value"],
        ["2020", 48.92],
        ["2025", 49.45],
        ["2030", 49.24],
        ["2035", 50.93],
        ["2040", 49.62],
        ["2025", 49.62]
 ];
    var options = {
        legend: "none",
        colors: ['#a52714', '#097138']
    };

这个图表很好用,但是现在 我只需要在2025年加一条垂直线

谢谢你的帮助。

1 回复 | 直到 6 年前

WhiteHat 6 年前

要添加垂直线,请在x轴之后使用注释角色。

将注释样式更改为 'line' ,
您可以添加文本或空白字符串来绘制垂直线。。。

const data = [
  ['Year', {role: 'annotation', type: 'string'}, 'Value'],
  ['2020', null, 48.92],
  ['2025', 'text', 49.45],
  ['2030', null, 49.24],
  ['2035', null, 50.93],
  ['2040', null, 49.62]
];
var options = {
  annotations: {
    stem: {
      color: '#097138'
    },
    style: 'line'
  },
  legend: 'none',
  colors: ['#a52714']
};

请参阅以下工作片段。。。

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  const data = [
    ['Year', {role: 'annotation', type: 'string'}, 'Value'],
    ['2020', null, 48.92],
    ['2025', 'text value', 49.45],
    ['2030', null, 49.24],
    ['2035', null, 50.93],
    ['2040', null, 49.62]
  ];
  var options = {
    annotations: {
      stem: {
        color: '#097138'
      },
      style: 'line'
    },
    legend: 'none',
    colors: ['#a52714']
  };
  var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
  chart.draw(google.visualization.arrayToDataTable(data), options);
});

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

推荐文章

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Agrim Singh · 对象无效,因为使用React router dom时显示React子错误

1 年前

Anaya Ammar · 渲染后未显示的值

1 年前

matin kahrizi · 当我的状态更改时,useSelector不更新

1 年前

YotiPoti · 我的照片太大了,无法容纳我的HTML画布。我该怎么办?

1 年前

Zemelon · -moz背面可见性不适用于顺风css

1 年前

Abdelaziz Elrasheed · 如何成为专业的网页开发人员。。。?[已关闭]

1 年前

JustTrynaProgram · React和Tailwind-从配置中读取自定义断点值

1 年前

Mark C. · 制作一个可松开的单选按钮[关闭]

1 年前

Tridip Lodh · 在ES6中,JAVASCRIPT函数在“严格使用”模式下的行为如何?[已关闭]

1 年前