Question

我是Java语言的新手，所以如果我只是忽略一些非常基本的内容，我会向您道歉！

我正在使用Google图表创建从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

Answer 1

而不是创建自定义工具提示，
尝试以下配置选项。

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>

Google折线图-CSV的多系列工具提示

1 个答案: