首页 文章

如何使数据标记始终显示在经典的Google Line Chart上

提问于
浏览 次
1

我必须使用经典的Google Line Chart，因为Material版本还不支持曲线，但我喜欢曲线 . 不幸的是，虽然看起来只有材料图表显示基准词干（我不确定我是否正确描述，但我的意思是那些代表线上数据点的点），并且只有当你将鼠标悬停在一条线上时（在任何地方）这条线） .

这是一个屏幕截图，左边是谷歌物质图表，我在线上盘旋，右边是一张chartjs图表，显示螺柱甚至没有悬停在任何东西上 .

Google Line Chart JSFiddle，您可以在其中查看Material和Classic Google Charts的行为：https://jsfiddle.net/csabatoth/yyhLwkaf/

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

在材料模式下，您必须将鼠标悬停在一条线上以使数据螺柱出现 . 在这方面，经典图表甚至更糟糕：你必须“跟随”这条线，直到你达到一个数据点，而这只是在它被揭示时 .

我想要的是这样的（见第一个可见的折线图）：http://www.chartjs.org/docs/#line-chart-introduction无论你是否悬停在线上，数据都是可见的 . 我似乎无法找出哪个是正确的选择 .

javascript charts google-visualization

1 回答

  • 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>
    回复于

相关问题