Question

<html>
    <head>
        <script type="text/javascript"
      src="https://www.google.com/jsapi?autoload={
        'modules':[{
          'name':'visualization',
          'version':'1',
          'packages':['corechart']
        }]
      }"></script>

        <script type="text/javascript">
  google.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);

    var options = {
      title: 'Company Performance',
      curveType: 'function',
      legend: { position: 'bottom' }
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart.draw(data, options);
  }
        </script>
    </head>
    <body>
        <div id="curve_chart" style="width: 900px; height: 500px"></div>
    </body>
</html>

在上面的示例中，如何为Expenses设置行宽= 0.因此我只能看到费用行的点数。其实我需要在项目中实施。在每个子项目的项目中，我创建了一个折线图，并在每个图表中为该主题中的学生标记创建了一行，另一行包含了该主题中每个考试的最高分。主题中的最高分不仅属于一个学生，所以我d＆＃ 39;不想表现出来。感谢您的帮助。

我有一个工作示例但它在用户点击图例文本时工作。我希望它在页面加载时工作。 https://www.google.com/jsapi'>

        <script>
        function updateTable() {

        // quick data - cleaned up for this example real data sources
        data = new Array();
        data[0] = new Array();
        data[0][0] = "DOE";
        data[0][1] = "Maths";
        data[0][2] = "Highest Marks";

        data[1] = new Array();
        data[1][0] = 01-01-13;
        data[1][1] = 85;
        data[1][2] = 99;

        data[2] = new Array();
        data[2][0] = 02-01-13;
        data[2][1] = 95;
        data[2][2] = 97;

        data[3] = new Array();
        data[3][0] = 03-01-13;
        data[3][1] = 96;
        data[3][2] = 98;

        var gdata = google.visualization.arrayToDataTable(data);

        var options = {
          // title: 'kala',
          hAxis: {title: 'Days',  titleTextStyle: {color: '#333'}}
          ,vAxis: {minValue: 0}
          ,height: 300
          ,width: 600
          ,chartArea: {left: 60}
          ,pointSize: 5              
          ,lineWidth: 2
          ,series: {0:{color: 'black', areaOpacity: 0.0, lineWidth: 2}
          ,1:{color: 'red', areaOpacity: 0.0, lineWidth: 2}
          }
            };

        var chart = new google.visualization.LineChart(document.getElementById('my_chart'));
        chart.draw(gdata, options);

        google.visualization.events.addListener(chart, 
            'select', 
            (function (x) { return function () { AreaSelectHander(chart, gdata, options)}})(1));

            }

        function AreaSelectHander(chart, gdata, options) {

        var selection = chart.getSelection();       
        var view = new google.visualization.DataView(gdata);
        console.log(options);


        i = selection[0].column - 1;


        if (options.series[i].lineWidth == 0) {
            options.series[i].lineWidth = 2;
            options.series[i].areaOpacity = 0.0;
        }
        else {
            options.series[i].lineWidth = 0;
            options.series[i].areaOpacity = 0.0;            
        }

        chart.draw(gdata, options);
        }
        </script>

        <script type='text/javascript'>
        google.load('visualization', '1', {packages:['table', 'corechart']});
        google.setOnLoadCallback(updateTable);
        </script>

        </head>

        <body>
            <div id='my_chart'></div>
        </body>
</html>

工作解决方案 https://www.google.com/jsapi'>

        <script>
        function updateTable() {

        // quick data - cleaned up for this example real data sources
        data = new Array();
        data[0] = new Array();
        data[0][0] = "DOE";
        data[0][1] = "Maths";
        data[0][2] = "Highest Marks";

        data[1] = new Array();
        data[1][0] = 01-01-13;
        data[1][1] = 85;
        data[1][2] = 99;

        data[2] = new Array();
        data[2][0] = 02-01-13;
        data[2][1] = 95;
        data[2][2] = 97;

        data[3] = new Array();
        data[3][0] = 03-01-13;
        data[3][1] = 96;
        data[3][2] = 98;

        var gdata = google.visualization.arrayToDataTable(data);

        var options = {
          // title: 'kala',
          hAxis: {title: 'Days',  titleTextStyle: {color: '#333'}}
          ,vAxis: {minValue: 0}
          ,height: 300
          ,width: 600
          ,chartArea: {left: 60}
          ,pointSize: 5              
          ,lineWidth: 2
          ,series: {0:{color: 'black', areaOpacity: 0.0, lineWidth: 2}
          ,1:{color: 'red', areaOpacity: 0.0, lineWidth: 2}
          }
            };

        var chart = new google.visualization.LineChart(document.getElementById('my_chart'));
        options.series[1].lineWidth = 0;
        options.series[1].areaOpacity = 0.0;    
        chart.draw(gdata, options);

        }
        </script>

        <script type='text/javascript'>
        google.load('visualization', '1', {packages:['table', 'corechart']});
        google.setOnLoadCallback(updateTable);
        </script>

        </head>

        <body>
            <div id='my_chart'></div>
        </body>
</html>

如何在google折线图中为一行设置线宽为零

0 个答案: