Как изменить цвет JSChart, используя CSS - PullRequest
Новая
       28

Как изменить цвет JSChart, используя CSS

0 голосов
/ 12 апреля 2019

У меня есть код для JSChart. Мне нужно изменить цвет диаграммы. Не фон, а цвет графика. Я могу изменить его с помощью JS, но мне нужно сделать это с помощью CSS, так как у меня есть кнопка переключения цветовой темы. Поэтому вместо использования JS мне нужно сделать это с помощью CSS.

Я пробовал отправленную линейную диаграмму, полученную линейную диаграмму, Linechart.sent, Linechart.received в CSS 

Below is the snippet which has JS and the HTML


<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>


var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title: {
		text: "Daily Email Analysis"
	},
	axisX: {
		valueFormatString: "DDD",
		minimum: new Date(2017, 1, 5, 23),
		maximum: new Date(2017, 1, 12, 1)
	},
	axisY: {
		title: "Number of Messages"
	},
	legend: {
		verticalAlign: "top",
		horizontalAlign: "right",
		dockInsidePlotArea: true
	},
	toolTip: {
		shared: true
	},
	data: [{
		name: "Received",
		showInLegend: true,
		legendMarkerType: "square",
		type: "area",
		color: "#3bff00",
		markerSize: 0,
		dataPoints: [
			{ x: new Date(2017, 1, 6), y: 220 },
			{ x: new Date(2017, 1, 7), y: 120 },
			{ x: new Date(2017, 1, 8), y: 144 },
			{ x: new Date(2017, 1, 9), y: 162 },
			{ x: new Date(2017, 1, 10), y: 129 },
			{ x: new Date(2017, 1, 11), y: 109 },
			{ x: new Date(2017, 1, 12), y: 149 }
		]
	},
	{
		name: "Sent",
		showInLegend: true,
		legendMarkerType: "square",
		type: "area",
		color: "rgba(0, 255, 216,0.6)",
		markerSize: 0,
		dataPoints: [
			{ x: new Date(2017, 1, 6), y: 42 },
			{ x: new Date(2017, 1, 7), y: 134 },
			{ x: new Date(2017, 1, 8), y: 79 },
			{ x: new Date(2017, 1, 9), y: 102 },
			{ x: new Date(2017, 1, 10), y: 183},
			{ x: new Date(2017, 1, 11), y: 100 },
			{ x: new Date(2017, 1, 12), y: 120 }
		]
	}]
    });
    chart.render();
    }
<canvas id="lineChart"></canvas>
<div id="chartContainer" style="height: 300px; width: 800px;padding-left:10%"></div>

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

...