опция explorer
поддерживается только с непрерывной осью .
Для непрерывной оси установите для типа столбца данных одно из следующих значений: number
, date
, datetime
или timeofday
.
Для дискретная ось, установите тип столбца данных на string
.
см. -> дискретный или непрерывный
при использовании arrayToDataTable
с образцами данных CSV,
первый тип столбца установлен на string
по умолчанию.
(примечание: ключевое слово new
не нужно с arrayToDataTable
, это статический метод)
мы можем преобразовать первый столбец в реальную дату, чтобы включитьexplorer
вариант.
arrayData = arrayData.map(function (row) {
return [
new Date(row[0]),
row[1]
];
});
см. Следующий рабочий фрагмент ...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var csvString = 'Date,Total\n9-Oct-17,103173\n10-Oct-17,103377\n11-Oct-17,103903\n12-Oct-17,103644\n13-Oct-17,103511\n14-Oct-17,103511\n15-Oct-17,103511\n16-Oct-17,103541\n17-Oct-17,103636\n18-Oct-17,103868\n19-Oct-17,104419\n20-Oct-17,104770\n21-Oct-17,104770\n22-Oct-17,104770\n23-Oct-17,104748\n24-Oct-17,104986\n25-Oct-17,104994\n26-Oct-17,105246\n27-Oct-17,105424\n';
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
arrayData = arrayData.map(function (row) {
return [
new Date(row[0]),
row[1]
];
});
var data = google.visualization.arrayToDataTable(arrayData);
var options = {
hAxis: {
title: 'Date'
},
vAxis: {
minValue: 0,
title: 'Total'
},
backgroundColor: '#f1f8e9',
lineWidth: 0.7,
chartArea: {
height: '100%',
width: '100%',
top: 12,
right: 24,
bottom: 48,
left: 72
},
explorer: {
axis: 'horizontal',
keepInBounds: true,
maxZoomIn: 4.0
}
}
chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
примечание: jsapi
больше не должен использоваться для загрузки библиотеки, вместо этого используйте loader.js
.
в соответствии с примечаниями к выпуску ...
Версия Google Charts, которая остается доступной через загрузчик jsapi
, больше не обновляется последовательно.Пожалуйста, используйте новый gstatic loader.js
с этого момента.
это только изменит оператор load
, см. Фрагмент выше ...
EDIT
добавление обратно $.get
функция, фрагмент должен быть следующим ...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
$.get('mil.csv', function(csvString) {
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
arrayData = arrayData.map(function (row) {
return [
new Date(row[0]),
row[1]
];
});
var data = google.visualization.arrayToDataTable(arrayData);
var options = {
hAxis: {
title: 'Date'
},
vAxis: {
minValue: 0,
title: 'Total'
},
backgroundColor: '#f1f8e9',
lineWidth: 0.7,
chartArea: {
height: '100%',
width: '100%',
top: 12,
right: 24,
bottom: 48,
left: 72
},
explorer: {
axis: 'horizontal',
keepInBounds: true,
maxZoomIn: 4.0
}
}
chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}, 'text');
});