改变谷歌图表的属性 [英] change properties of google chart

问题描述

hellp每个身体在我的代码我有谷歌图表这里是照片

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

以及我如何创建一个细线？

  google.charts.load（'current'，{'packages'：['' line'，'corechart']}）; 
 google.charts.setOnLoadCallback（drawChart）; 
函数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'}）; 
 //间隔角色列。 
 // data.addColumn（{type：'boolean'，role：'scope'}）; 
 //间隔角色列。 
 //data.addColumn ({type:'boolean'，role：'scope'}）; 
 //间隔角色列。 
 // data.addColumn（'数字'，平均日光时数）; 
 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,2119.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,0 null，null]，
 [3.50944,7039.9929599999，null，null]，
 [3.51296,4693.32864，null，null]，
 [3.51648,2346.66432， 
 [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，
 //给每个系列一个与下面的vAxes号码。 
系列：{
 0：{轴：''，}，
间隔：{$ b $'间隔'：{
'颜色'：'＃000000'， 
'style'：'bars'，
'barWidth'：0，
'lineWidth'：4，
'pointSize'：1，
'fillOpacity'： 1'b $ b}，
 //'interval'：{'color'：'＃000000'，'style'：'bars'，'barWidth'：0，'lineWidth'：4，'pointSize' ：1，'fillOpacity'：1}，
} 
}，
颜色：['green'，'red'，'black']，
 vAxes：{
 //向每个轴添加标题。 
 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（）; 
 
  

解决方案 >'style'列角色可用于使点大小 0 ，

和行更薄
$ b

请参阅以下工作片段，

a数据视图用于为'style'添加列 role ...

google.charts.load>

（'current'，{callback：drawChart，packages：['corechart']}）;函数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,2119.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 ;}';}，输入：'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};函数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>

hellp every body in my code i have google chart here is the photograph

the problem when i click on the line there is strange dot on it how do i disable this property

and how do i creat a thiner line ?

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' column role can be used to make the point size 0,
and the line thinner

see following working snippet,
a data view is used to add columns for the 'style' role...

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>

这篇关于改变谷歌图表的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！