Google 图表（或其他 JS 可视化框架）同一行内具有不同 styles/colors 的折线图

Question

假设我正在绘制一个包含已知（确定）值和估计（不确定）值的折线图。这些值都在同一系列中（不是两条不同的线）。这张预计人口增长率图表就是一个很好的例子：

请注意在 2012 年左右之后，线条会变成蓝色。

我已经阅读了 Customizing Lines 页面，但它似乎改变了整行行的样式，而不仅仅是它的一部分。

我的问题是：是否可以更改同系列中某行的部分的样式and/or颜色？

解决方案，按合意程度排序：

在值本身中指明它是精确值还是估计值，并相应地更改该线段的样式（例如 [(45, "exact"), (50, "exact"), (75, "estimated')] 尽管更有可能 "exact" 和 "estimated" 将分别替换为 1 和 0）。
数据和样式说明分别发送到 API，但对于同一系列。
最不想要的解决方案是我实际上创建了两个不同的系列，因为这意味着为每一行数据创建（并跟踪）两个系列，并生成将它们分开的代码进入该系列，并确保在该系列不应有数据的地方不显示任何点。

虽然我更喜欢 Google 可视化，因为它（相对）简单，但我对 D3.js 有一些经验，如果无法使用 [=52]，我愿意使用它=]可视化。

Answer 1

实际上我找到了两个解决方案：

使用数据表和 "Certainty" 角色

将 DataTables 与 roles 结合使用允许您将数据值用作图表修饰符，而不是实际的图表数据点。在这种情况下，具体要使用的角色是 "certainty"。您将其作为数据后的附加列提供，并指出该列是确定性角色，如下所示：

var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Value');
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
    ['2014-12-01',100, true],
    ['2015-01-01',200, true],
    ['2015-02-01',300, true],
    ['2015-03-01',400, true],
    ['2015-04-01',500, false]
]);

google.setOnLoadCallback(drawChart);
      function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Date');
    data.addColumn('number', 'Value');
    data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
    data.addRows([
        ['2014-12-01',100, true],
        ['2015-01-01',200, true],
        ['2015-02-01',300, true],
        ['2015-03-01',400, true],
        ['2015-04-01',500, false]
    ]);

        var options = {
          legend: 'none',
          hAxis: { minValue: 0, maxValue: 9 },
          curveType: 'function',
          pointSize: 7
        };

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

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>

请注意，您无法控制折线图 "uncertain" 部分的呈现 - Google 为您决定。如果您想要更多的控制——例如，如果您希望它也改变颜色或者不变成虚线，您可以使用如下所述的样式。

为点

的线设置样式

此外，虽然在 Customizing Points 页面中一点也不明确，但您可以为行指定样式点以及点本身。如果您想对段的样式进行更多自定义（比如它的粗细或颜色），您可以使用此选项：

var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Value');
data.addColumn({type:'string',role:'style'}); // style col.
data.addRows([
    ['2014-12-01',100, null],
    ['2015-01-01',200, null],
    ['2015-02-01',300, null],
    ['2015-03-01',400, null],
    ['2015-04-01',500, 'line { stroke-color: purple }']
]);

google.setOnLoadCallback(drawChart);
      function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Date');
    data.addColumn('number', 'Value');
    data.addColumn({type:'string',role:'style'}); // style col.
    data.addRows([
        ['2014-12-01',100, null],
        ['2015-01-01',200, null],
        ['2015-02-01',300, null],
        ['2015-03-01',400, null],
        ['2015-04-01',500, 'line { stroke-color: purple }']
    ]);

        var options = {
          legend: 'none',
          hAxis: { minValue: 0, maxValue: 9 },
          curveType: 'function',
          pointSize: 7
        };

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

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>

据我所知，您只能更改颜色；您无法调整虚线的宽度或类型。

Google 图表（或其他 JS 可视化框架）同一行内具有不同 styles/colors 的折线图

Google Charts (or other JS visualization framework) line graphs with different styles/colors within the same line

javascript

linechart

google-visualization

使用数据表和 "Certainty" 角色

为点