更改谷歌图表的属性

2023-12-20

我的代码中的每个人我都有谷歌图表,这是照片

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

以及如何创建更细的线?

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();
}

a '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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

更改谷歌图表的属性 的相关文章

随机推荐