Линейная диаграмма Google - подсказка из нескольких серий от CSV

Question

Линейная диаграмма Google - подсказка из нескольких серий от CSV

1

Я новичок в javascript, поэтому заранее прошу прощения, если я просто упускаю из виду что-то очень простое!

Я использую Google Charts для создания линейки нескольких линий, которые я рисую из файла csv. Он работает хорошо, но всплывающая подсказка пока только показывает ось x и одно значение y.

Я прочитал документацию и увидел примеры именно того, что мне нужно, однако роль столбца задается после добавления данных столбца с помощью addColumn, а не из файла csv.

Это мое первое сообщение, поэтому, пожалуйста, дайте мне знать, если вам нужна дополнительная информация!

Вот мой текущий код, который работает для отображения линейки нескольких серий:

    function NewChart() {
   $.get("test.csv", function(csvString) {
      // transform the CSV string into a 2-dimensional array
      var arrayData = $.csv.toArrays(csvString, {onParseValue: 
   $.csv.hooks.castToScalar});

      // this new DataTable object holds all the data
      var data = new google.visualization.arrayToDataTable(arrayData);

        var view = new google.visualization.DataView(data);
        view.setColumns([
            {
                sourceColumn: 0,
                type: 'datetime',
                calc: function(table, row) {
                    var value = table.getValue(row, 0);
                    return moment(value).toDate();
                }
            },2,3,4

]);

      var newChart1 = new google.visualization.ChartWrapper({
         chartType: 'LineChart',
         containerId: 'chartContainer1',
         dataTable: view,
         options:{

            title: 'New Chart',
        explorer: { 
            actions: ["dragToZoom", "rightClickToReset"],
            maxZoomIn: 0.2,
            maxZoomOut: 1.0,
            zoomDelta: 10,
            axis: "horizontal",
            keepInBounds: true
                },
            titleTextStyle : {color: 'grey', fontSize: 20},
                legend: { position: 'bottom'},
                hAxis: {
                    format: 'yyyy-MM-d',
                    gridlines: {count: 3},
                    slantedTextAngle: 85
                },
                    vAxis: {
                    title: 'Utilization %',
                    minValue: 0,
                    maxValue: 100,
                },
                chartArea: {
                    left: 50,
                    right: 15,
                    width: '100%'
                },
                animation: {

                    duration: 2000,
                    easing: 'out',
                    startup: true

                },
         }
      });
      newChart1.draw();
   });
}

Вот пример моего файла csv:

Date,CPU Utilization,NETWORK(rxkB/s),NETWORK(txkB/s),NETWORK Total
2018-10-22 16:10:01,3.37,38.04,149.33,187.37
2018-10-22 16:20:01,3.8,37.82,6.87,44.69
2018-10-22 16:30:01,3.28,38.47,7.04,45.51
2018-10-22 16:40:01,3.35,40.04,7.19,47.23
2018-10-22 16:50:01,3.46,39.55,7.11,46.66

mikeslifeonfilm 23 окт. 2018, в 17:23

Источник

Теги:

javascript

linechart

tooltip

google-visualization

google-chartwrapper

1 ответ

Ещё вопросы

WhiteHat · Accepted Answer · 2018-10-23T14-45-00.000Z

вместо создания пользовательской подсказки,
попробуйте следующий вариант конфигурации.

focusTarget: 'category'

когда установлено, всплывающая подсказка отображает значения из всех серий для строки.
Это полезно для сравнения значений разных серий.

см. следующий рабочий фрагмент...

google.charts.load('current', {
  packages:['controls', 'corechart']
}).then(function () {
  //$.get("test.csv", function(csvString) {
    // transform the CSV string into a 2-dimensional array
    var csvString = 'Date,CPU Utilization,NETWORK(rxkB/s),NETWORK(txkB/s),NETWORK Total\n2018-10-22 16:10:01,3.37,38.04,149.33,187.37\n2018-10-22 16:20:01,3.8,37.82,6.87,44.69\n2018-10-22 16:30:01,3.28,38.47,7.04,45.51\n2018-10-22 16:40:01,3.35,40.04,7.19,47.23\n2018-10-22 16:50:01,3.46,39.55,7.11,46.66';
    var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

    // this new DataTable object holds all the data
    var data = google.visualization.arrayToDataTable(arrayData);

    var view = new google.visualization.DataView(data);
    view.setColumns([{
      sourceColumn: 0,
      type: 'datetime',
      calc: function(table, row) {
        var value = table.getValue(row, 0);
        //return moment(value).toDate();
        return new Date(value);
      }
    }, 2, 3, 4]);

    var newChart1 = new google.visualization.ChartWrapper({
      chartType: 'LineChart',
      containerId: 'chartContainer1',
      dataTable: view.toDataTable(),
      options: {
        focusTarget: 'category',
        title: 'New Chart',
        explorer: {
          actions: ['dragToZoom', 'rightClickToReset'],
          maxZoomIn: 0.2,
          maxZoomOut: 1.0,
          zoomDelta: 10,
          axis: 'horizontal',
          keepInBounds: true
        },
        titleTextStyle: {color: 'grey', fontSize: 20},
        legend: {position: 'bottom'},
        hAxis: {
          format: 'yyyy-MM-d',
          gridlines: {count: 3},
          slantedTextAngle: 85
        },
        vAxis: {
          title: 'Utilization %',
          minValue: 0,
          maxValue: 100,
        },
        chartArea: {
          left: 50,
          right: 15,
          width: '100%'
        },
        animation: {
          duration: 2000,
          easing: 'out',
          startup: true
        },
       }
    });
    newChart1.draw();
  //});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<div id="chartContainer1"></div>

Это прекрасно работает, большое спасибо! Я пинаю себя за то, что был так близко, ха-ха