在Google折线图中绘制一条基线

我使用Google折线图我想绘制一条基线但我不知道该如何做，例如我想在2004年的400和600之间画线应该如何我这样做，
这里谷歌样品：在Google折线图中绘制一条基线

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Year', 'Sales', 'Expenses'], 
      ['2004', 1000,  400], 
      ['2005', 1170,  460], 
      ['2006', 660,  1120], 
      ['2007', 1030,  540] 
     ]); 

     var options = { 
      title: 'Company Performance' 
     }; 

     var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="chart_div" style="width: 900px; height: 500px;"></div> 
    </body> 
</html>

来源

2014-07-25 Daniel.V

我不确定你的问题究竟是什么，你想要做什么，你可以添加一个图像显示你想要什么？ – asgallant

对不起，我不能把图片，因为我在这里是新的，我没有足够的声誉，但我可以更清楚我想要一条线垂直于图例如我想在2004年画一条线400和600之间的图像水平轴是x，垂直轴是y我想要一条线，那首先是x = 2004，y = 400，结尾是x = 2004，y = 600，我不想改变x只要你改变你现在可以得到它 –

您可以在几个不同的方式做到这一点，取决于你想要达到什么。最简单的方法是使用“间隔”的角色列：

function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'Sales', 'Expenses', {role: 'interval', type: 'number'}, {role: 'interval', type: 'number'}], 
     ['2004', 1000, 400, 400, 600], 
     ['2005', 1170, 460, null, null], 
     ['2006', 660, 1120, null, null], 
     ['2007', 1030, 540, null, null] 
    ]); 

    var options = { 
     title: 'Company Performance' 
    }; 

    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
}

有相当多的定制你可以做间隔，看到documentation。

另一种方法是为该行添加一系列新数据，将第一列的数据类型从“字符串”更改为“数字”，并使用相同的x值添加多行数据，例如：

function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'Sales', 'Expenses', 'vertical lines'], 
     [2004, 1000, 400, 400], 
     [2004, null, null, 600], 
     [2005, 1170, 460, null], 
     [2006, 660, 1120, null], 
     [2007, 1030, 540, null] 
    ]); 

    var options = { 
     title: 'Company Performance', 
     interpolateNulls: true, // this prevents your other lines from breaking 
     series: { 
      2: { 
       // these options control your new series for the vertical lines 
       visibleInLegend: false, // hide from the legend 
       enableInteractivity: false // make the line non-interactive 
       color: '#9055a6' // set the color of the line 
       // etc... 
      } 
     } 
    }; 

    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
}

来源

2014-07-25 18:23:20 asgallant

但他们都没有帮助我只需要在我的图表中的这条垂直线，我希望他们的第一个和最后一个显示时点击他们像图表的其他部分 –

如果你想能够点击它们，就像其他的系列一样，使用第二种方法，但不要在'series'选项中设置'enableInteractivity'选项 - 我把那些选项放在了你可以做的事情的例子中，如果你需要这行代码不同于其他人。 – asgallant

在Google折线图中绘制一条基线

回答

相关问题