带有Google可视化功能的多色折线图

Question

I'm using google line chart in my project and facing a problem that I need to change color for some segments to visualize the target status changes over time. 我在项目中使用了Google折线图，并且遇到了一个问题，即我需要更改某些段的颜色以可视化目标状态随时间的变化。 It should look like this: 它看起来应该像这样：

I've searched around for quite long but couldn't find a way to do that with google chart. 我已经搜索了很长时间，但是找不到使用Google Chart的方法。 My workaround is to add another series to the chart and alternately set the value of the second line eq to the first line based on the status but it looks tedious. 我的解决方法是向图表添加另一个系列，然后根据状态将第二行eq的值交替设置为第一行，但看起来很乏味。

Is there a proper way to do this? 有适当的方法来做到这一点吗？ Here is a sample of my workaround solution: 这是我的解决方法示例：

 function drawMultipleTrendlineChart() { var chart; var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', 'Sales value A'); data.addColumn('number', 'Sales value B'); data.addRows([ [new Date(2013, 3, 11), 200, 0], [new Date(2013, 4, 02), 500, 0], [new Date(2013, 5, 03), 700, 0], [new Date(2013, 6, 04), 800, 800], [new Date(2013, 7, 05), 500, 500], [new Date(2013, 8, 06), 900, 0], [new Date(2014, 0, 07), 800, 0], [new Date(2014, 1, 08), 1100, 1100], [new Date(2014, 2, 09), 1000, 1000], [new Date(2014, 2, 10), 1000, 0], [new Date(2014, 3, 11), 800, 0], ]); var formatter = new google.visualization.NumberFormat({ fractionDigits: 2, prefix: 'R$:' }); formatter.format(data, 1); var dateFormatter = new google.visualization.NumberFormat({ pattern: 'MMM yyyy' }); dateFormatter.format(data, 0); var chartHeight = 400; var chartWidth = 600; var chartOptions = { tooltip: { isHtml: true }, title: 'Trendlines with multiple lines', isStacked: true, width: chartWidth, height: chartHeight, colors: ['#0000D8', '#00dddd'], hAxis: { title: 'example title', slantedText: false, slantedTextAngle: 45, textStyle: { fontSize: 10 }, format: 'dd-MM-yyyy' }, chartArea: { left: 50, top: 20, width: (chartWidth - 10), height: (chartHeight - 90) } }; chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart')); chart.draw(data, chartOptions); } google.load('visualization', '1', { packages: ['corechart'], callback: drawMultipleTrendlineChart });

 <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> </script> </head> <body> <div id="multipleTrendChart"></div> </body> </html>

Answer 1

After looking at this answer How to change color for negative values , I tried and this works for me. 在看了这个答案之后，我尝试了如何为负值更改颜色，这对我有用。 The answer is using DataView API to manipulate the data. 答案是使用DataView API来处理数据。

 google.charts.load('current', { callback: drawLineColors, packages: ['corechart'] }); function drawLineColors() { var data = new google.visualization.DataTable(); data.addColumn('number', 'X'); data.addColumn('number', 'Blue Team'); data.addColumn('number', 'Red Team'); data.addRows([ [0, 0, 0], [3, 1700, 1600], [6, 1800, 1700], [9, 2500, 2423], [12, 3000, 2500], [15, 4700, 5800], [18, 5200, 5900], [21, 5500, 6000], [24, 6000, 6200], [27, 6800, 6700], [30, 7500, 7000], [33, 7800, 8200], [36, 7900, 9756], [39, 8000, 10752], [42, 9000, 13753], [45, 15000, 17845] ]); var options = { legend: { position: 'top' }, enableInteractivity: false, width: 712, height: 156, backgroundColor: { fill: 'transparent' }, curveType: 'function', hAxis: { title: 'Time' }, vAxis: { title: 'Team Gold' } }; var dataView = new google.visualization.DataView(data); dataView.setColumns([ // reference first column by index 0, // variance { calc: function(data, row) { return data.getValue(row, 1); }, type: 'number', label: 'Y' }, // variance color { calc: function(data, row) { var val = data.getValue(row, 2) - data.getValue(row, 1); if (val >= 0) { return '#0000FF'; } return '#FF0000'; }, type: 'string', role: 'style' } ]); var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(dataView, options); }

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>

带有Google可视化功能的多色折线图

问题描述

1 个解决方案

解决方案1
2 2018-05-07 07:41:23

带有Google可视化功能的多色折线图

问题描述

1 个解决方案

解决方案1 2 2018-05-07 07:41:23

解决方案1
2 2018-05-07 07:41:23