2016-08-02 4 views
0

Я использую ChartJS в своем проекте (точнее, ng2-диаграммы для Angular 2, построенные поверх оригинальной библиотеки).Есть ли способ скрыть/настроить ChartJS над легендой?

Я вижу, есть вариант:

Легенда: ложь | правда

Однако я нахожу особенно раздражают полны, чтобы иметь возможность удалитьверхней легенды (который описывает каждую строку в например, линейная диаграмма). Ниже вы можете увидеть, что я имею в виду:

enter image description here

Я попытался с

.chart-legend { 
    visibility: hidden; 
    display: none; 
} 

черпают вдохновение из Chartjs Legend Styling

, но я думаю, что относится к какой-то другой легенде (нижняя легенда). Есть ли способ настроить/скрыть верхнюю легенду?

Также есть Есть ли возможность изменить ориентацию этикеток x/y-осей? (например, отображать их по вертикали, а не по диагонали)

ответ

4

При создании диаграммы вы можете дать ему набор параметров диаграммы. Одним из возможных вариантов является Legend Configuration. Чтобы скрыть легенду, просто используйте опцию, как это:

options: { 
    legend: { display: false } 
} 

Хотя я не использовал NG2-диаграмму, глядя через documentation (в частности, на примере диаграмм), кажется, вы можете просто определить график легенду булеву как это:

public lineChartLegend:boolean = true; 

И затем добавить это значение к диаграмме, как это:

<base-chart class="chart" 
        ... 
        [legend]="lineChartLegend" 
        [chartType]="lineChartType" 
        ...></base-chart> 

Наконец, вероятно, причина, почему решение Chartjs Legend Styling не работа заключается в том, что он был разработан для chart.js v1.x, а ng2-диаграммы, похоже, работают с chart.js v2.x, что является серьезным изменением предыдущей версии.

Надеюсь, это поможет!

+0

добавление его в опции ([options] в ng2-диаграммах). Спасибо! – dragonmnl