манипуляции с графическими диаграммами google на основе значения серии

Я использую диаграмму Google для моего проекта. Мне нужно манипулировать точками на линейной диаграмме на основе значений. Например, если значение меньше 170, тогда оно показывает значение по умолчанию в линейной диаграмме, и если оно больше 170, оно должно показывать другую точку на линейной диаграмме. как я должен поместить другой цвет для точек в линейной диаграмме для одной серии? Вот мой код:манипуляции с графическими диаграммами google на основе значения серии

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Date', 'Record'], 
      ['4/1', 165], 
      ['4/2', 160], 
      ['4/3', 163], 
      ['4/4', 173] 
     ]); 

     var options = { 
      title: 'Line Chart', pointSize : 5 }; 

     var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     } 
    </script> 
    </head> 
    <body>`enter code here` 
    <div id="chart_div" style="width: 900px; height: 500px;"></div> 
    </body> 
</html>

Plese помогите мне в этом.

источник

2013-06-10 Pritish Shah

Вы не можете окрашивать очки индивидуально, используя действующий API визуализации Google. Любая окраска должна выполняться отдельными сериями.

В вашем случае вы можете добиться желаемого результата с помощью обходного пути. Вот то, что я предполагаю, что Вы хотите:

Line Chart Sample

Этот код должен дать вам результат вы хотите:

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Date'); 
     data.addColumn('number', 'Line'); 
     data.addColumn('number', 'Under 170'); 
     data.addColumn('number', 'Over 170'); 
     data.addRows([ 
      ['4/1', 165, 165, null], 
      ['4/2', 160, 160, null], 
      ['4/3', 163, 163, null], 
      ['4/4', 173, null, 173] 
     ]); 

     var options = { 
      title: 'Line Chart', 
      pointSize : 5, 
      series: [{color: 'black', pointSize: 0}, {color: 'red', lineWidth: 0}, {color: 'blue', lineWidth: 0}] 
     }; 

     var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     } 
    </script> 
    </head> 
    <body>`enter code here` 
    <div id="chart_div" style="width: 900px; height: 500px;"></div> 
    </body> 
</html>

В принципе, то, что вам нужно сделать, это:

Создать 3 разные серии
- Один для линии (без очков s hown)
- Один для точек < 170 (цвет 1)
- Один для точки> = 170 (цвет 2)
Добавить все значения данных в серии 1 (так что сплошная линия)
Добавление точек в серии 2, которые < 170, со всеми другими значениями, как null
Добавить указывает на 3-й серии, которые> = 170, со всеми другими значениями, как null

Затем вы можете использовать опцию series для форматирования диаграммы. Первая серия определит цвет линии. Вторая серия определит цвет для точек < 170. Третья серия определит цвет для точки> 170.

источник

2013-06-10 23:32:23 jmac

манипуляции с графическими диаграммами google на основе значения серии

ответ

Смежные вопросы