Javascript 谷歌图表-线条图的全宽_Javascript_Google Visualization

Javascript 谷歌图表-线条图的全宽

javascript google-visualization

Javascript 谷歌图表-线条图的全宽,javascript,google-visualization,Javascript,Google Visualization,我使用组合谷歌图表在图表上显示我的数据和目标，如下所示：我希望在图形的整个宽度上显示目标线，如下所示：以下是我尝试过但运气不佳的内容： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Google Vis

我使用组合谷歌图表在图表上显示我的数据和目标，如下所示：

我希望在图形的整个宽度上显示目标线，如下所示：

以下是我尝试过但运气不佳的内容：

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Create and populate the data table.
        var data = google.visualization.arrayToDataTable([
          ['Month', 'RUH %', 'SJA %', 'Goal 30', 'Goal 60'],
          ['GKP',  16,      93,       30,     60],
          ['HKP',  13,      11,       30,     60],
          ['SKP',  15,      11,       30,     60],
          ['AEV',  19,      80,       30,     60],
          ['AE',   63,      69,       30,     60]
        ]);

        // Create and draw the visualization.
        var ac = new google.visualization.ComboChart(document.getElementById('visualization'));

        ac.draw(data, {
          title : 'RUH og SJA måloppnåelse',
          width: 600,
          height: 400,
          chartArea: {'width': '90%', 'height': '80%'},
          colors: ["blue", "green"],
          legend: { position: 'bottom' },
          vAxis: {title: ""},
          hAxis: {title: ""},
          seriesType: "bars",
          series: {2: {type: "line", visibleInLegend: false, color: "red"}, 3:{type: "line", visibleInLegend: false, color: "red"}}
        });
      }


      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 600px; height: 400px;"></div>
  </body>
</html>


谷歌可视化API示例
load（'visualization'，'1'，{packages:['corechart']}）；
函数drawVisualization（）{
//创建并填充数据表。
var data=google.visualization.arrayToDataTable([
[‘月份’、‘RUH%’、‘SJA%’、‘目标30’、‘目标60’]，
[GKP'，16,93,30,60]，
[HKP'，13,11,30,60]，
[SKP'，15,11,30,60]，
[AEV'，19,80,30,60]，
['AE'，63,69,30,60]
]);
//创建并绘制可视化。
var ac=新的google.visualization.ComboChart（document.getElementById（'visualization'）；
ac.draw（数据、{
标题：“我的朋友，我的朋友”，
宽度：600，
身高：400，
图表区：{'width'：'90%，'height'：'80%}，
颜色：[“蓝色”、“绿色”]，
图例：{位置：'bottom'}，
动词：{title:}，
哈克斯：{title:}，
序列类型：“条”，
系列：{2:{type:“line”，visibleInLegend:false，color:“red”}，3:{type:“line”，visibleInLegend:false，color:“red”}
});
}
setOnLoadCallback（drawVisualization）；

如何实现这一点？

要将线条延伸到图表边缘，必须使用连续类型轴，并在现有数据前后将数据集延伸一行。您可以使用DataView将字符串标签转换为格式化的数字，然后使用

hAxis.ticks

选项设置轴标签：

function drawVisualization() {
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
        ['Month', 'RUH %', 'SJA %', 'Goal 30', 'Goal 60'],
        ['',   null,    null,       30,     60],
        ['GKP',  16,      93,       30,     60],
        ['HKP',  13,      11,       30,     60],
        ['SKP',  15,      11,       30,     60],
        ['AEV',  19,      80,       30,     60],
        ['AE',   63,      69,       30,     60],
        ['',   null,    null,       30,     60]
    ]);

    var ticks = [];
    // ignore the first and last rows
    for (var i = 1; i < data.getNumberOfRows() - 1; i++) {
        ticks.push({v: i, f: data.getValue(i, 0)});
    }

    var view = new google.visualization.DataView(data);
    view.setColumns([{
        type: 'number',
        label: data.getColumnLabel(0),
        calc: function (dt, row) {
            return {v: row, f: dt.getValue(row, 0)};
        }
    }, 1, 2, 3, 4]);

    var range = view.getColumnRange(0);
    var offset = 0.5; // change this value to adjust the padding to the left and right of the columns in the chart

    // Create and draw the visualization.
    var ac = new google.visualization.ComboChart(document.getElementById('visualization'));

    ac.draw(view, {
        title : 'RUH og SJA måloppnåelse',
        width: 600,
        height: 400,
        chartArea: {
            width: '90%',
            height: '80%'
        },
        colors: ["blue", "green"],
        legend: {
            position: 'bottom'
        },
        vAxis: {
            title: ""
        },
        hAxis: {
            title: "",
            ticks: ticks,
            viewWindow: {
                min: range.min + offset,
                max: range.max - offset
            },
            gridlines: {
                // hide vertical gridlines to match discrete chart display
                color: 'transparent'
            }
        },
        seriesType: "bars",
        series: {
            2: {
                type: "line",
                visibleInLegend: false,
                color: "red"
            },
            3:{
                type: "line",
                visibleInLegend: false,
                color: "red"
            }
        }
    });
}

函数drawVisualization（）{
//创建并填充数据表。
var data=google.visualization.arrayToDataTable([
[‘月份’、‘RUH%’、‘SJA%’、‘目标30’、‘目标60’]，
[''，零，零，30，60]，
[GKP'，16,93,30,60]，
[HKP'，13,11,30,60]，
[SKP'，15,11,30,60]，
[AEV'，19,80,30,60]，
[AE'，63,69,30,60]，
[''，零，零，30，60]
]);
var=[]；
//忽略第一行和最后一行
对于（var i=1；i


请参见此处的工作示例：
首先，缺少实际问题！下一个：你试过什么？你能给我们一把小提琴吗？里面没有东西吗？嗯，我发现没有什么有用的东西可以解决这个问题：-（有什么想法吗？我在找，但什么也找不到。我想这是一个尝试和错误的东西^^