Question

我在获取“应用程序”和要分离的数据之间的间距时遇到麻烦（图1）。它在冒号和整数之间需要一个空间。我希望它看起来像图2。

（由于我是新手，所以无法发布图表图片）
图表1：
2011
应用：10 <-无间距

图2 ：（来自Google）
25
猫：42个<-间距

我正在动态设置数据点，这与Google图表中的示例不同。请看下面：

    public string GetAppFiledPatIssuedByYear(DateTime? startDate, DateTime? endDate)
    {
        using (var db = new PatentDashboardEntities())
        {
            var appFiledAndPatentIssued = db.f_sp_Get_AppPatentsFiled(startDate, endDate);
            StringBuilder sb = new StringBuilder();
            //open parent array
            sb.Append("[");

            //add new row containing column names
            sb.Append("[\"Year\",\"Applications\", \"Patents\"], ");

            int count = 0;

            foreach (f_sp_Get_AppPatentsFiled_Result result in appFiledAndPatentIssued)
            {
                if (count > 0)
                    sb.Append(", ");
                count++;
                sb.Append("[");
                sb.Append("\"" + result.LatestYear.ToString().Trim() + "\", ");
                sb.Append(result.AppCount.ToString().Trim() + ", ");
                sb.Append(result.PatentCount.ToString().Trim());
                sb.Append("]");
            }
            // In case of data is not coming from server.
            if (startDate != null && endDate != null)
            {
                int startYear = startDate.Value.Year;
                int endYear = endDate.Value.Year;
                List<int> yearRange = new List<int>();
                for (int i = startYear; i <= endYear; i++)
                {
                    yearRange.Add(i);
                }
                if (count == 0)
                {
                    foreach (var year in yearRange)
                    {
                        if (count > 0)
                            sb.Append(", ");
                        count++;
                        sb.Append("[");
                        sb.Append("\"  " + year + "\", ");
                        sb.Append("0 ,");
                        sb.Append("0");
                        sb.Append("]");
                    }
                }
            }
            // Close parent array
            sb.Append("]");
            return sb.ToString();
        }
    }

*****构建JS的代码******

function getAppFiledPatentsIssuedByYear() {
retrieveData("/PatentDashboard/GetAppFiledPatIssuedByYear?Date=" + $('#dtDateRange').val() + "", drawAppFiledPatIssuedByYearChart);}

function drawAppFiledPatIssuedByYearChart(json) {
var data = google.visualization.arrayToDataTable(json);

var options = {
    isStacked: false,
    height: 250,
    width: "100%",
    fontSize: 12,
    fontName: fontName,
    pointSize: 10,
    legend: { position: 'top' },
    chartArea: {
        top: 50,
        left: 60,
        width: "100%"
    },
    hAxis: {
        slantedText: true,
        slantedTextAngle: 45,
        textStyle: {
            fontsize: 11
        }
    },
    vAxis: {
        format: "0",
        textStyle: {
            bold: true
        },
        viewWindow: {
            min: 0
        }
    },

    colors: filedAndIssuedColors
};

setVAxisTicks(data, options);

var chart = new google.visualization.LineChart(document.getElementById("patIssuedDiv"));
chart.draw(data, options);

var chartName = 'YearlyApplicationsFiledAndPatentsIssued';
var chartTitle = 'Yearly Applications Filed and Patents Issued';

setUpRawDataLink(chart, chartTitle, chartName, data);
setUpExcelLink($("#yearlyAppFiledandPatentsIssuedExportExcel"), { chartName: chartName });
setUpImageLink($("#yearlyAppFiledandPatentsIssuedExportImage"), chart, chartTitle);}

它作为字符串（从后端）返回，然后将内容作为JSON对象传递回JS文件中的前端。

Link to Google Datapoint
如何获取“ Applications：10”到“ Applications：10”之间的间距

Answer 1

只是无法重新创建问题，在这里似乎工作正常。
参见以下工作片段...

可能是fontName吗？（什么？）

下面的代码段还缺少什么？
filedAndIssuedColors和setVAxisTicks，但看不到它们如何引起问题。

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([["Year","Applications", "Patents"], ["1990", 1, 0], ["1991", 11, 0], ["1992", 2, 0], ["1993", 1, 0], ["1994", 19, 0], ["1997", 1, 0], ["2000", 1, 0], ["2001", 9, 0], ["2002", 11, 0], ["2003", 2, 1], ["2004", 2, 0], ["2005", 15, 0], ["2006", 2, 1], ["2007", 34, 1], ["2008", 2, 5], ["2009", 2, 5], ["2010", 27, 1], ["2011", 14, 6], ["2012", 23, 7], ["2013", 22, 14], ["2014", 15, 6], ["2015", 94, 12], ["2016", 26, 22], ["2017", 96, 33], ["2018", 22, 51]]);

  var options = {
      isStacked: false,
      height: 250,
      width: "100%",
      fontSize: 12,
      //fontName: fontName,
      pointSize: 10,
      legend: { position: 'top' },
      chartArea: {
          top: 50,
          left: 60,
          width: "100%"
      },
      hAxis: {
          slantedText: true,
          slantedTextAngle: 45,
          textStyle: {
              fontsize: 11
          }
      },
      vAxis: {
          format: "0",
          textStyle: {
              bold: true
          },
          viewWindow: {
              min: 0
          }
      },

      //colors: filedAndIssuedColors
  };

  //setVAxisTicks(data, options);

  var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
  chart.draw(data, options);

});

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

编辑

我们当然可以使用自定义工具提示添加更多空间，
参见以下工作片段...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([["Year","Applications", "Patents"], ["1990", 1, 0], ["1991", 11, 0], ["1992", 2, 0], ["1993", 1, 0], ["1994", 19, 0], ["1997", 1, 0], ["2000", 1, 0], ["2001", 9, 0], ["2002", 11, 0], ["2003", 2, 1], ["2004", 2, 0], ["2005", 15, 0], ["2006", 2, 1], ["2007", 34, 1], ["2008", 2, 5], ["2009", 2, 5], ["2010", 27, 1], ["2011", 14, 6], ["2012", 23, 7], ["2013", 22, 14], ["2014", 15, 6], ["2015", 94, 12], ["2016", 26, 22], ["2017", 96, 33], ["2018", 22, 51]]);

  var options = {
      isStacked: false,
      height: 250,
      width: "100%",
      fontSize: 12,
      fontName: 'Open Sans',
      pointSize: 10,
      legend: { position: 'top' },
      chartArea: {
          top: 50,
          left: 60,
          width: "100%"
      },
      hAxis: {
          slantedText: true,
          slantedTextAngle: 45,
          textStyle: {
              fontsize: 11
          }
      },
      vAxis: {
          format: "0",
          textStyle: {
              bold: true
          },
          viewWindow: {
              min: 0
          }
      },
      tooltip: {
          isHtml: true
      }
  };
  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    type: 'string',
    role: 'tooltip',
    calc: function (dt, row) {
      return '<div class="tooltip"><div><span>' + dt.getValue(row, 0) + '</span></div><div>' + dt.getColumnLabel(1) + ':&nbsp;&nbsp;<span>' + dt.getValue(row, 1) + '</span></div>';
    },
    p: {html: true}
  }, 2, {
    type: 'string',
    role: 'tooltip',
    calc: function (dt, row) {
      return '<div class="tooltip"><div><span>' + dt.getValue(row, 0) + '</span></div><div>' + dt.getColumnLabel(2) + ':&nbsp;&nbsp;<span>' + dt.getValue(row, 2) + '</span></div>';
    },
    p: {html: true}
  }]);
console.log('test');

  var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
  chart.draw(view.toDataTable(), options);
});

.tooltip {
  font-family: 'Open Sans';
  font-size: 11pt;
  padding: 4px;
}

.tooltip div {
  padding: 4px;
}

.tooltip span {
  font-weight: bold;
}

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

数据点的Google图表间距

1 个答案: