2017-08-18 33 views
2

HELLP每一个身体在我的代码我这里有谷歌图表照片变化性能图表

当我点击就行了问题存在的奇怪点我如何禁用此属性

我如何创造一条细线?

here is the graph and here is the red dot

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

请格式化您的代码,以便人们可以阅读它。所有你需要做的是在每行前添加四个空格(“”)。 – TheCrzyMan

回答

2

一个'style'柱作用,可用于使点尺寸0
更薄

参见下列工作片断,
一个数据视图用于所述线为'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>

+0

非常感谢测试 –

+0

呵呵..现在它在图中做了洞! 你有什么其他想法吗? –

+0

是的它仍然显示小圆圈!只是小的客户想要没有 –

1

我增加

enableInteractivity:假, 颜色: '绿色', '红色', '灰色'],

现在的颜色是工作,但不工作的小鼠标,显示鼠标悬停的成本。

需求是,这将留