2

Google 折れ線グラフでは、系列線を破線にするにはどうすればよいですか?

たとえば、下のスクリーンショットの赤い線 (「Row B」と呼ばれる) は?

ここに画像の説明を入力

以下は私の非常に単純なテスト コードです。ブラウザで開くだけですぐに動作します。

確実性の役割を追加するための通常の提案に注意してください。

    {"p":{"role":"certainty"},"label":"Dashed","type":"boolean"}

両方の行（行「A」と「B」）が破線（の一部）になるため、ここでは役に立ちません。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript">

        var data = {"rows":[
        {"c":[{"v":"C"},{"v":-43},{"v":-42}]},
        {"c":[{"v":"D"},{"v":-49},{"v":-39}]},
        {"c":[{"v":"E"},{"v":-49},{"v":-48}]},
        {"c":[{"v":"F"},{"v":-50},{"v":-49}]},
        {"c":[{"v":"G"},{"v":-57},{"v":-56}]}],

        "cols":[
        {"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},
        {"p":{"role":"data"},"label":"Row A","type":"number"},
        {"p":{"role":"data"},"label":"Row B","type":"number"}]};

        function drawCharts() {
            var x = new google.visualization.DataTable(data);

            var options = {
                title: 'How to make red line dashed?',
                width: 800,
                height: 600
            };

            var chart = new google.visualization.LineChart(document.getElementById('test'));
            chart.draw(x, options);
        }

        $(function() {
            google.setOnLoadCallback(drawCharts);
        });

</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
4

1 に答える 1

2

これは確実性ロールを使用した例です。これがうまくいかない理由はありますか？

google.load('visualization', '1', {
    packages: ['corechart'],
    callback: drawVisualization
});

var data = {
    "rows": [
      {"c": [{"v": "C"}, {"v": -43}, {"v": -42}, {"v": false}]},
      {"c": [{"v": "D"}, {"v": -49}, {"v": -39}, {"v": false}]},
      {"c": [{"v": "E"}, {"v": -49}, {"v": -48}, {"v": false}]},
      {"c": [{"v": "F"}, {"v": -50}, {"v": -49}, {"v": false}]},
      {"c": [{"v": "G"}, {"v": -57}, {"v": -56}, {"v": false}]}],

    "cols": [
      {"p": {"role": "domain"},"label": "MEASUREMENT","type": "string"},
      {"p": {"role": "data"},"label": "Row A","type": "number"},
      {"p": {"role": "data"},"label": "Row B","type": "number"},
      {"p": {"role": "certainty"},"type": "boolean"}]
};

function drawVisualization() {
    var x = new google.visualization.DataTable(data);

    var options = {
        title: 'How to make red line dashed?',
        width: 800,
        height: 600
    };

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

これは、確実性ロールを使用して両方の線を破線にする例です。

google.load('visualization', '1', {
    packages: ['corechart'],
    callback: drawVisualization
});

var data = {
    "rows": [
      {"c": [{"v": "C"}, {"v": -43}, {"v": false}, {"v": -42}, {"v": false}]},
      {"c": [{"v": "D"}, {"v": -49}, {"v": false}, {"v": -39}, {"v": false}]},
      {"c": [{"v": "E"}, {"v": -49}, {"v": false}, {"v": -48}, {"v": false}]},
      {"c": [{"v": "F"}, {"v": -50}, {"v": false}, {"v": -49}, {"v": false}]},
      {"c": [{"v": "G"}, {"v": -57}, {"v": false}, {"v": -56}, {"v": false}]}],

    "cols": [
      {"p": {"role": "domain"},"label": "MEASUREMENT","type": "string"},
      {"p": {"role": "data"},"label": "Row A","type": "number"},
      {"p": {"role": "certainty"},"type": "boolean"},
      {"p": {"role": "data"},"label": "Row B","type": "number"},
      {"p": {"role": "certainty"},"type": "boolean"}]
};

function drawVisualization() {
    var x = new google.visualization.DataTable(data);

    var options = {
        title: 'How to make red line dashed?',
        width: 800,
        height: 600
    };

    var chart = new google.visualization.LineChart(document.getElementById('visualization'));
    chart.draw(x, options);
}
于 2013-06-26T13:48:42.180 に答える