2013-04-22 2 views
5

Я строю линейную диаграмму для одного из наших приложений. Линейная часть диаграммы работает нормально, но теперь я должен заполнить область под линией цветом, что-то вроде этого изображения ниже.Android - Заполните цвет ниже линейной диаграммы

enter image description here

Я использую этот код, чтобы нарисовать линию на растровое изображение, используя холст.

List<Float> xCoordinates = (List<Float>) coordinates[0]; 
    List<Float> yCoordinates = (List<Float>) coordinates[1]; 

    for (int i = 0; i < xCoordinates.size(); i++) { 
     if (!firstSet) { 
      x = xCoordinates.get(i); 
      y = yCoordinates.get(i); 
      p.moveTo(x, y); 
      firstSet = true; 
     } else { 
      x = xCoordinates.get(i); 
      y = yCoordinates.get(i); 
      p.lineTo(x, y); 
     } 
    } 

    textureCanvas.drawPath(p, pG); 

Что мне нужно знать, есть ли способ легко найти область ниже линии и сделать его цвет или мне придется вычислить каждую область между 3 точками для графа и залейте его цвет?

Я не могу использовать существующие библиотеки диаграмм, как AchartEngine, ChartDroid, aFreeChart ЭСТ.

+0

Я не знаю, что движок диаграммы, но другие. Имеет ли диаграмма области как тип диаграммы? Если да, просто используйте диаграмму области и, если возможно, отформатируйте верхнюю границу с другим цветом, чтобы дать вам вид линии и заливку ниже линии. – teylyn

ответ

6

найден решению

я впервые окрашен градиент, после того, что я рисовал линейную диаграмму и стерт по всей линии, создавая еще один путь, по которому следует линейному графику и закрывать его в конце. После этого я нарисовал область прозрачную, чтобы стереть верхнюю часть градиента.

List<Float> xCoordinates = coordinates.first; 
    List<Float> yCoordinates = coordinates.second; 
    for (int i = 0; i < xCoordinates.size(); i++) { 
     if (!firstSet) { 
      x = xCoordinates.get(i); 
      y = yCoordinates.get(i); 
      linePath.moveTo(x, y); 

      erasePath.moveTo(x, 0); 
      erasePath.lineTo(x, y); 

      firstSet = true; 
     } else { 
      x = xCoordinates.get(i); 
      y = yCoordinates.get(i); 
      linePath.lineTo(x, y); 
      erasePath.lineTo(x, y); 
     } 
    } 

    erasePath.lineTo(getWidth(), y); 
    erasePath.lineTo(getWidth(), 0); 
    erasePath.lineTo(0, 0); 

    getTextureCanvas().drawPath(erasePath, clear); 
    getTextureCanvas().drawPath(linePath, pG); 

Результат выглядел как этот

enter image description here

Другой способ сделать это, чтобы следовать по пути, точно и клип вокруг нижнего края и просто рисовать градиент внутри второго пути. Это даст тот же результат, но все содержимое над графиком будет сохранено и ничего не будет стерто.

+0

Спасибо, что разместили свое (большое) собственное решение, это мне очень помогло! –

+0

Рад я мог бы помочь – Neil

+0

Можете ли вы показать мне полный исходный код, чтобы заполнить цвет под линейной диаграммой? – UmAnusorn

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