Question

在我的代码中，我的谷歌图表中的每个人都是照片

问题当我点击该行时，它上面有一个奇怪的点如何禁用此属性

我如何创建一条更好的线？

google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var button = document.getElementById('change-chart');
  var chartDiv = document.getElementById('dealchart_div');
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', "");
  data.addColumn('number', "");
  data.addColumn('number', "");
  // data.addColumn({type:'number', role:'interval'});
  // data.addColumn({type:'number', role:'interval'});
  // interval role col.
  // data.addColumn({type:'boolean', role:'scope'});
  // interval role col.
  //data.addColumn({type:'boolean', role:'scope'});
  // interval role col.
  // data.addColumn('number', "Average Hours of Daylight");
  data.addRows([
    [ 3.47072 ,32853.30048,null,null ],
    [ 3.47424 ,30506.63616,null,null ],
    [ 3.47776 ,28159.97184,null,null ],
    [ 3.48128 ,25813.30752,null,null ],
    [ 3.4848 ,23466.6432,null,null ],
    [ 3.48832 ,21119.97888,null,null ],
    [ 3.49184 ,18773.31456,null,null ],
    [ 3.49536 ,16426.65024,null,null ],
    [ 3.49888 ,14079.98592,null,null ],
    [ 3.5024 ,11733.3216,null,null ],
    [ 3.50592 ,9386.6572799999,null,null ],
    [ 3.50944 ,7039.9929599999,null,null ],
    [ 3.51296 ,4693.32864,null,null ],
    [ 3.51648 ,2346.66432,null,null ],
    [ 3.51999 ,null,null,175999.824 ],
    [ 3.52 ,null,null,-175999.824 ],
    [ 3.52352 ,null,-2346.66432,null ],
    [ 3.52704 ,null,-4693.32864,null ],
    [ 3.53056 ,null,-7039.9929599999,null ],
    [ 3.53408 ,null,-9386.6572799999,null ],
    [ 3.5376 ,null,-11733.3216,null ],
    [ 3.54112 ,null,-14079.98592,null ],
    [ 3.54464 ,null,-16426.65024,null ],
    [ 3.54816 ,null,-18773.31456,null ],
    [ 3.55168 ,null,-21119.97888,null ],
    [ 3.5552 ,null,-23466.6432,null ],
    [ 3.55872 ,null,-25813.30752,null ],
    [ 3.56224 ,null,-28159.97184,null ],
    [ 3.56576 ,null,-30506.63616,null ],
    [ 3.56928 ,null,-32853.30048,null ],
    [ 3.5728 ,null,-35199.9648,null ],
    [ 3.57632 ,null,-37546.62912,null ],
    [ 3.57984 ,null,-39893.29344,null ],
    [ 3.58336 ,null,-42239.95776,null ],
    [ 3.58688 ,null,-44586.62208,null ],
    [ 3.5904 ,null,-46933.2864,null ],
    [ 3.59392 ,null,-49279.950720001,null ],
    [ 3.59744 ,null,-51626.615040001,null ]
    // [ $newx , $payyer],
    // [new Date(2014, 1), .4, 8.7],
    //[new Date(2014, 11), -.2, 4.5]
  ]);
  var classicOptions = {
    title: 'Your Exposed Deal',
    width: 430,
    height: 360,
    // Gives each series an axis that matches the vAxes number below.
    series: {
      0: {axis: '', },
      interval: {
        'interval': {
          'color': '#000000',
          'style':'bars',
          'barWidth':0,
          'lineWidth':4,
          'pointSize':1,
          'fillOpacity':1
        },
        // 'interval': { 'color': '#000000', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':1, 'fillOpacity':1 },
      }
    },
    colors: [ 'green','red','black'],
    vAxes: {
      // Adds titles to each axis.
      0: {title: 'Profit'},
    },
    hAxis: {
      title: 'Rate',
      legend: 'none'
    },
    vAxis: {
      viewWindow: { }
    }
  };

  function drawMaterialChart() {
    var materialChart = new google.charts.Line(chartDiv);
    materialChart.draw(data, materialOptions);
  }

  function drawClassicChart() {
    var classicChart = new google.visualization.LineChart(chartDiv);
    classicChart.draw(data, classicOptions);
  }

  drawClassicChart();
}

Answer 1

'style'列角色可用于制作磅值0，
和行 thinner

请参阅以下工作片段，
数据视图用于添加'style'角色的列...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var button = document.getElementById('change-chart');
  var chartDiv = document.getElementById('chart_div');
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', "");
  data.addColumn('number', "");
  data.addColumn('number', "");
  data.addRows([
    [ 3.47072 ,32853.30048,null,null ],
    [ 3.47424 ,30506.63616,null,null ],
    [ 3.47776 ,28159.97184,null,null ],
    [ 3.48128 ,25813.30752,null,null ],
    [ 3.4848 ,23466.6432,null,null ],
    [ 3.48832 ,21119.97888,null,null ],
    [ 3.49184 ,18773.31456,null,null ],
    [ 3.49536 ,16426.65024,null,null ],
    [ 3.49888 ,14079.98592,null,null ],
    [ 3.5024 ,11733.3216,null,null ],
    [ 3.50592 ,9386.6572799999,null,null ],
    [ 3.50944 ,7039.9929599999,null,null ],
    [ 3.51296 ,4693.32864,null,null ],
    [ 3.51648 ,2346.66432,null,null ],
    [ 3.51999 ,null,null,175999.824 ],
    [ 3.52 ,null,null,-175999.824 ],
    [ 3.52352 ,null,-2346.66432,null ],
    [ 3.52704 ,null,-4693.32864,null ],
    [ 3.53056 ,null,-7039.9929599999,null ],
    [ 3.53408 ,null,-9386.6572799999,null ],
    [ 3.5376 ,null,-11733.3216,null ],
    [ 3.54112 ,null,-14079.98592,null ],
    [ 3.54464 ,null,-16426.65024,null ],
    [ 3.54816 ,null,-18773.31456,null ],
    [ 3.55168 ,null,-21119.97888,null ],
    [ 3.5552 ,null,-23466.6432,null ],
    [ 3.55872 ,null,-25813.30752,null ],
    [ 3.56224 ,null,-28159.97184,null ],
    [ 3.56576 ,null,-30506.63616,null ],
    [ 3.56928 ,null,-32853.30048,null ],
    [ 3.5728 ,null,-35199.9648,null ],
    [ 3.57632 ,null,-37546.62912,null ],
    [ 3.57984 ,null,-39893.29344,null ],
    [ 3.58336 ,null,-42239.95776,null ],
    [ 3.58688 ,null,-44586.62208,null ],
    [ 3.5904 ,null,-46933.2864,null ],
    [ 3.59392 ,null,-49279.950720001,null ],
    [ 3.59744 ,null,-51626.615040001,null ]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      return 'line {stroke-width: 1; stroke-color: green;}, point {size: 0;}';
    },
    type: 'string',
    role:'style'
  }, 2, {
    calc: function (dt, row) {
      return 'line {stroke-width: 1; stroke-color: red;}, point {size: 0;}';
    },
    type: 'string',
    role:'style'
  }, 3, {
    calc: function (dt, row) {
      return 'line {stroke-width: 1; stroke-color: black;}, point {size: 0;}';
    },
    type: 'string',
    role:'style'
  }]);

  var classicOptions = {
    title: 'Your Exposed Deal',
    width: 430,
    height: 360,
    colors: [ 'green','red','black'],
    vAxes: {
      0: {title: 'Profit'},
    },
    hAxis: {
      title: 'Rate',
      legend: 'none'
    },
    pointSize: 0
  };

  function drawClassicChart() {
    var classicChart = new google.visualization.LineChart(chartDiv);

    google.visualization.events.addListener(classicChart, 'select', function () {
      classicChart.setSelection([]);
    });

    classicChart.draw(view, classicOptions);
  }

  drawClassicChart();
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Answer 2

我添加了

enableInteractivity：false，颜色：['绿色'，'红色'，'灰色']，

现在颜色正在运行但不能正常显示鼠标悬停时显示y exis成本的小div。

要求是这将保持

更改谷歌图表的属性

2 个答案: