Интервал диаграммы Google для точки данных

Question

У меня проблемы с получением промежутка между «Приложениями» и данными, которые нужно разделить (диаграмма 1).Это нуждается в промежутке между двоеточием и int.Я хочу, чтобы он выглядел как график 2.

(поскольку я новичок, я не могу публиковать изображения графика)
График 1:
2011
Применения: 10 <-без интервала </p>

Диаграмма 2: (от Google)
25
Кошки: 42 <- интервал </p>

Я задаю свою точку данных динамически, не так, как в примере с 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.

Ссылка на Google Datapoint
Как получить интервал между «Applications: 10» для«Приложения: 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>