javascript - 如何使数据柱始终出现在经典的 Google 折线图上

Question

我必须使用经典的 Google Line Chart，因为 Material 版本还不支持曲线，但我喜欢曲线。不幸的是，尽管似乎只有 Material 图表显示数据茎(我不确定我是否正确描述了这一点，但我的意思是那些代表线上数据点的点)，并且仅当您将鼠标悬停在一条线上(沿线的任何位置)时行)。

这是一个屏幕截图，左边是一个 Google Material Chart，我将鼠标悬停在线上，右边是一个 ChartJS 图表，即使没有将鼠标悬停在任何东西上也可以显示螺柱。

Google 折线图 JSFiddle，您可以在其中查看 Material 和经典 Google 图表的行为方式:https://jsfiddle.net/csabatoth/yyhLwkaf/

var classicOptions = {
    title: 'Foo',
    width: 900,
    height: 500,
    theme: 'material',
    curveType: 'function'
    // TODO
};

在 Material 模式下，您必须将鼠标悬停在一条线上才能显示数据螺柱。经典图表在这方面更糟糕:您必须“跟随”这条线，直到到达一个数据点，而那时它才被显示出来。

我想要的是类似的东西(参见第一个可见的折线图): http://www.chartjs.org/docs/#line-chart-introduction无论您是否将鼠标悬停在线上，数据螺柱都是可见的。我似乎无法找出哪个是正确的选择。

Answer 1

我认为您正在寻找pointSize

google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var button = document.getElementById('change-chart');
  var chartDiv = document.getElementById('chart_div');

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Month');
  data.addColumn('number', "Average Temperature");
  data.addColumn('number', "Average Hours of Daylight");

  data.addRows([
    [new Date(2014, 0),  -.5,  5.7],
    [new Date(2014, 1),   .4,  8.7],
    [new Date(2014, 2),   .5,   12],
    [new Date(2014, 3),  2.9, 15.3],
    [new Date(2014, 4),  6.3, 18.6],
    [new Date(2014, 5),    9, 20.9],
    [new Date(2014, 6), 10.6, 19.8],
    [new Date(2014, 7), 10.3, 16.6],
    [new Date(2014, 8),  7.4, 13.3],
    [new Date(2014, 9),  4.4,  9.9],
    [new Date(2014, 10), 1.1,  6.6],
    [new Date(2014, 11), -.2,  4.5]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, 2]);


  var materialOptions = {
    chart: {
      title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
    },
    width: 900,
    height: 500,
    series: {
      // Gives each series an axis name that matches the Y-axis below.
      0: {axis: 'Temps'},
      1: {axis: 'Daylight'}
    },
    axes: {
      // Adds labels to each axis; they don't have to match the axis names.
      y: {
        Temps: {label: 'Temps (Celsius)'},
        Daylight: {label: 'Daylight'}
      }
    }
  };

  var classicOptions = {
    curveType: 'function',
    pointSize: 10,
    title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
    width: 900,
    height: 500,
    // Gives each series an axis that matches the vAxes number below.
    series: {
      0: {targetAxisIndex: 0},
      1: {targetAxisIndex: 1}
    },
    vAxes: {
      // Adds titles to each axis.
      0: {title: 'Temps (Celsius)'},
      1: {title: 'Daylight'}
    },
    hAxis: {
      ticks: [
              new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
              new Date(2014, 4),  new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
              new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
             ]
    },
    vAxis: {
      viewWindow: {
        max: 30
      }
    }
  };

  function drawMaterialChart() {
    var materialChart = new google.charts.Line(chartDiv);
    materialChart.draw(view, materialOptions);
    button.innerText = 'Change to Classic';
    button.onclick = drawClassicChart;
  }

  function drawClassicChart() {
    var classicChart = new google.visualization.LineChart(chartDiv);
    classicChart.draw(view, classicOptions);
    button.innerText = 'Change to Material';
    button.onclick = drawMaterialChart;
  }

  drawClassicChart();

}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<button id="change-chart">Change to Material</button>
<br><br>
<div id="chart_div"></div>