Charts 如何在谷歌折线图中画一条虚线？

在中，如何制作一个系列虚线

例如，下面截图中的红线（称为“B行”）

下面是我非常简单的测试代码，只要在浏览器中打开它，它就会立即工作

请注意，通常建议添加角色：

在这里没有帮助，因为它会使两行（行“A”和“B”）都变成虚线（部分）

变量数据={“行”：[
{“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}]}，
“科尔斯”：[
{“p”：{“role”：“domain”}，“label”：“MEASUREMENT”，“type”：“string”}，
{“p”：{“role”：“data”}，“label”：“Row A”，“type”：“number”}，
{“p”：{“角色”：“数据”}，“标签”：“B行”，“类型”：“编号”}]}；
函数绘图图（）{
var x=新的google.visualization.DataTable（数据）；
变量选项={
标题：“如何使红线虚线？”，
宽度：800，
身高：600
};
var chart=new google.visualization.LineChart（document.getElementById（'test'）；
绘制图表（x，选项）；
}
$（函数（）{
setOnLoadCallback（绘图图）；
});

使用确定性角色。这对你不起作用有什么原因吗

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

---

谢谢，但我还是不明白它是怎么工作的。我试图修改您的代码，使两个系列都变成虚线，但失败了：您需要将每个确定性列放在系列列的后面。秩序很重要。

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