Ik probeer een voorbeeld van Highchartszoals het in mijn applicatie staat. Maar ik krijg gewoon een effen zwarte rechthoek zoals weergegeven in de volgende afbeelding.
Het volgende is de output die ik krijg:
<div id="activity-chart" data-highcharts-chart="0" style="height: 300px;">
<div id="highcharts-tpw9bq1-0" dir="ltr" class="highcharts-container ">
<svg version="1.1" class="highcharts-root" xmlns="http://www.w3.org/2000/svg" width="675" height="300" viewBox="0 0 675 300">
<desc>Created with Highcharts 6.0.4</desc>
<defs>
<clipPath id="highcharts-tpw9bq1-1">
<rect x="0" y="0" width="156" height="585"></rect>
</clipPath>
</defs>
<rect class="highcharts-background" x="0.5" y="0.5" width="673" height="298" rx="0" ry="0"></rect>
<rect class="highcharts-plot-background" x="80" y="42" width="585" height="156"></rect>
<g class="highcharts-grid highcharts-xaxis-grid ">
<path class="highcharts-grid-line" d="M 80 94.5 L 665 94.5" opacity="1"></path>
<path class="highcharts-grid-line" d="M 80 146.5 L 665 146.5" opacity="1"></path>
<path class="highcharts-grid-line" d="M 80 198.5 L 665 198.5" opacity="1"></path>
<path class="highcharts-grid-line" d="M 80 41.5 L 665 41.5" opacity="1"></path>
</g>
<g class="highcharts-grid highcharts-yaxis-grid ">
<path class="highcharts-grid-line" d="M 79.5 42 L 79.5 198" opacity="1"></path>
<path class="highcharts-grid-line" d="M 152.5 42 L 152.5 198" opacity="1"></path>
<path class="highcharts-grid-line" d="M 225.5 42 L 225.5 198" opacity="1"></path>
<path class="highcharts-grid-line" d="M 298.5 42 L 298.5 198" opacity="1"></path>
<path class="highcharts-grid-line" d="M 372.5 42 L 372.5 198" opacity="1"></path>
<path class="highcharts-grid-line" d="M 445.5 42 L 445.5 198" opacity="1"></path>
<path class="highcharts-grid-line" d="M 518.5 42 L 518.5 198" opacity="1"></path>
<path class="highcharts-grid-line" d="M 591.5 42 L 591.5 198" opacity="1"></path>
<path class="highcharts-grid-line" d="M 665.5 42 L 665.5 198" opacity="1"></path>
</g>
<rect class="highcharts-plot-border" x="79.5" y="41.5" width="586" height="157"></rect>
<g class="highcharts-axis highcharts-xaxis ">
<path class="highcharts-axis-line" d="M 79.5 42 L 79.5 198"></path>
<path class="highcharts-tick" d="M 80 94.5 L 70 94.5" opacity="1"></path>
<path class="highcharts-tick" d="M 80 146.5 L 70 146.5" opacity="1"></path>
<path class="highcharts-tick" d="M 80 198.5 L 70 198.5" opacity="1"></path>
<path class="highcharts-tick" d="M 80 41.5 L 70 41.5" opacity="1"></path>
</g>
<g class="highcharts-axis highcharts-yaxis ">
<path class="highcharts-axis-line" d="M 80 198.5 L 665 198.5"></path>
<text x="372.5" text-anchor="middle" transform="translate(0,0)" class="highcharts-axis-title" y="242">
<tspan>Fruit eaten</tspan>
</text>
</g>
<g class="highcharts-series-group">
<g class="highcharts-series highcharts-series-0 highcharts-bar-series highcharts-color-0 highcharts-tracker" transform="translate(665,198) rotate(90) scale(-1,1) scale(1 1)" clip-path="url(#highcharts-tpw9bq1-1)">
<rect x="131.5" y="512.5" width="13" height="73" class="highcharts-point highcharts-color-0"></rect>
<rect x="79.5" y="585.5" width="13" height="0" class="highcharts-point highcharts-color-0"></rect>
<rect x="27.5" y="293.5" width="13" height="292" class="highcharts-point highcharts-color-0"></rect>
</g>
<g class="highcharts-markers highcharts-series-0 highcharts-bar-series highcharts-color-0 " transform="translate(665,198) rotate(90) scale(-1,1) scale(1 1)" clip-path="none"></g>
<g class="highcharts-series highcharts-series-1 highcharts-bar-series highcharts-color-1 highcharts-tracker" transform="translate(665,198) rotate(90) scale(-1,1) scale(1 1)" clip-path="url(#highcharts-tpw9bq1-1)">
<rect x="115.5" y="219.5" width="13" height="366" class="highcharts-point highcharts-color-1"></rect>
<rect x="63.5" y="73.5" width="13" height="512" class="highcharts-point highcharts-color-1"></rect>
<rect x="11.5" y="366.5" width="13" height="219" class="highcharts-point highcharts-color-1"></rect>
</g>
<g class="highcharts-markers highcharts-series-1 highcharts-bar-series highcharts-color-1 " transform="translate(665,198) rotate(90) scale(-1,1) scale(1 1)" clip-path="none"></g>
</g>
<text x="338" text-anchor="middle" class="highcharts-title" y="21">
<tspan>Fruit Consumption</tspan>
</text>
<text x="338" text-anchor="middle" class="highcharts-subtitle" y="43"></text>
<g class="highcharts-legend" transform="translate(266,257)">
<rect class="highcharts-legend-box" rx="0" ry="0" x="0.5" y="0.5" width="141" height="27" visibility="visible"></rect>
<g>
<g>
<g class="highcharts-legend-item highcharts-bar-series highcharts-color-0 highcharts-series-0" transform="translate(8,3)">
<text x="21" text-anchor="start" y="17">
<tspan>Jane</tspan>
</text>
<rect x="1" y="4" width="14" height="14" rx="7" ry="7" class="highcharts-point"></rect>
</g>
<g class="highcharts-legend-item highcharts-bar-series highcharts-color-1 highcharts-series-1" transform="translate(80.984375,3)">
<text x="21" y="17" text-anchor="start">
<tspan>John</tspan>
</text>
<rect x="1" y="4" width="14" height="14" rx="7" ry="7" class="highcharts-point"></rect>
</g>
</g>
</g>
</g>
<g class="highcharts-axis-labels highcharts-xaxis-labels ">
<text x="65" text-anchor="end" transform="translate(0,0)" y="74" opacity="1">
<tspan>Apples</tspan>
</text>
<text x="65" text-anchor="end" transform="translate(0,0)" y="126" opacity="1">
<tspan>Bananas</tspan>
</text>
<text x="65" text-anchor="end" transform="translate(0,0)" y="178" opacity="1">
<tspan>Oranges</tspan>
</text>
</g>
<g class="highcharts-axis-labels highcharts-yaxis-labels ">
<text x="80" text-anchor="middle" transform="translate(0,0)" y="220" opacity="1">
<tspan>0</tspan>
</text>
<text x="153.125" text-anchor="middle" transform="translate(0,0)" y="220" opacity="1">
<tspan>1</tspan>
</text>
<text x="226.25" text-anchor="middle" transform="translate(0,0)" y="220" opacity="1">
<tspan>2</tspan>
</text>
<text x="299.375" text-anchor="middle" transform="translate(0,0)" y="220" opacity="1">
<tspan>3</tspan>
</text>
<text x="372.5" text-anchor="middle" transform="translate(0,0)" y="220" opacity="1">
<tspan>4</tspan>
</text>
<text x="445.625" text-anchor="middle" transform="translate(0,0)" y="220" opacity="1">
<tspan>5</tspan>
</text>
<text x="518.75" text-anchor="middle" transform="translate(0,0)" y="220" opacity="1">
<tspan>6</tspan>
</text>
<text x="591.875" text-anchor="middle" transform="translate(0,0)" y="220" opacity="1">
<tspan>7</tspan>
</text>
<text x="660.6953125" text-anchor="middle" transform="translate(0,0)" y="220" opacity="1">
<tspan>8</tspan>
</text>
</g>
<text x="665" class="highcharts-credits" text-anchor="end" y="295">Highcharts.com</text>
</svg>
</div>
</div>
U kunt opmerken in de bovenstaande code is dat geen enkel element het attribuut heeft fill. Maar in het voorbeelduitgang op JSFiddle kunt u zien dat veel elementen het kenmerk hebben fill. U kunt de onderstaande uitvoer zien:
<div id="container" style="height: 300px" data-highcharts-chart="0">
<div id="highcharts-odm2fvi-0" dir="ltr" class="highcharts-container " style="position: relative; overflow: hidden; width: 599px; height: 300px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<svg version="1.1" class="highcharts-root" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="599" height="300" viewBox="0 0 599 300">
<desc>Created with Highcharts 6.0.4</desc>
<defs>
<clipPath id="highcharts-odm2fvi-1">
<rect x="0" y="0" width="160" height="519" fill="none"></rect>
</clipPath>
</defs>
<rect fill="#ffffff" class="highcharts-background" x="0" y="0" width="599" height="300" rx="0" ry="0"></rect>
<rect fill="none" class="highcharts-plot-background" x="70" y="46" width="519" height="160"></rect>
<g class="highcharts-grid highcharts-xaxis-grid ">
<path fill="none" class="highcharts-grid-line" d="M 70 99.5 L 589 99.5" opacity="1"></path>
<path fill="none" class="highcharts-grid-line" d="M 70 153.5 L 589 153.5" opacity="1"></path>
<path fill="none" class="highcharts-grid-line" d="M 70 206.5 L 589 206.5" opacity="1"></path>
<path fill="none" class="highcharts-grid-line" d="M 70 46.5 L 589 46.5" opacity="1"></path>
</g>
<g class="highcharts-grid highcharts-yaxis-grid ">
<path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 69.5 46 L 69.5 206" opacity="1"></path>
<path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 134.5 46 L 134.5 206" opacity="1"></path>
<path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 199.5 46 L 199.5 206" opacity="1"></path>
<path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 264.5 46 L 264.5 206" opacity="1"></path>
<path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 329.5 46 L 329.5 206" opacity="1"></path>
<path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 393.5 46 L 393.5 206" opacity="1"></path>
<path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 458.5 46 L 458.5 206" opacity="1"></path>
<path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 523.5 46 L 523.5 206" opacity="1"></path>
<path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 589.5 46 L 589.5 206" opacity="1"></path>
</g>
<rect fill="none" class="highcharts-plot-border" x="70" y="46" width="519" height="160"></rect>
<g class="highcharts-axis highcharts-xaxis ">
<path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 70 99.5 L 60 99.5" opacity="1"></path>
<path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 70 153.5 L 60 153.5" opacity="1"></path>
<path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 70 206.5 L 60 206.5" opacity="1"></path>
<path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 70 45.5 L 60 45.5" opacity="1"></path>
<path fill="none" class="highcharts-axis-line" stroke="#ccd6eb" stroke-width="1" d="M 69.5 46 L 69.5 206"></path>
</g>
<g class="highcharts-axis highcharts-yaxis ">
<text x="329.5" text-anchor="middle" transform="translate(0,0)" class="highcharts-axis-title" style="color:#666666;fill:#666666;" y="244">
<tspan>Fruit eaten</tspan>
</text>
<path fill="none" class="highcharts-axis-line" d="M 70 206 L 589 206"></path>
</g>
<g class="highcharts-series-group">
<g class="highcharts-series highcharts-series-0 highcharts-bar-series highcharts-color-0 highcharts-tracker " transform="translate(589,206) rotate(90) scale(-1,1) scale(1 1)" clip-path="url(#highcharts-odm2fvi-1)">
<rect x="134.5" y="454.5" width="13" height="65" fill="rgb(124,181,236)" stroke="#ffffff" stroke-width="1" class="highcharts-point highcharts-color-0 "></rect>
<rect x="81.5" y="519.5" width="13" height="0" fill="#7cb5ec" stroke="#ffffff" stroke-width="1" class="highcharts-point highcharts-color-0"></rect>
<rect x="27.5" y="260.5" width="13" height="259" fill="#7cb5ec" stroke="#ffffff" stroke-width="1" class="highcharts-point highcharts-color-0"></rect>
</g>
<g class="highcharts-markers highcharts-series-0 highcharts-bar-series highcharts-color-0 " transform="translate(589,206) rotate(90) scale(-1,1) scale(1 1)" clip-path="none"></g>
<g class="highcharts-series highcharts-series-1 highcharts-bar-series highcharts-color-1 highcharts-tracker" transform="translate(589,206) rotate(90) scale(-1,1) scale(1 1)" clip-path="url(#highcharts-odm2fvi-1)">
<rect x="118.5" y="195.5" width="13" height="324" fill="#434348" stroke="#ffffff" stroke-width="1" class="highcharts-point highcharts-color-1"></rect>
<rect x="65.5" y="65.5" width="13" height="454" fill="#434348" stroke="#ffffff" stroke-width="1" class="highcharts-point highcharts-color-1"></rect>
<rect x="11.5" y="324.5" width="13" height="195" fill="#434348" stroke="#ffffff" stroke-width="1" class="highcharts-point highcharts-color-1"></rect>
</g>
<g class="highcharts-markers highcharts-series-1 highcharts-bar-series highcharts-color-1 " transform="translate(589,206) rotate(90) scale(-1,1) scale(1 1)" clip-path="none"></g>
</g>
<text x="300" text-anchor="middle" class="highcharts-title" style="color:#333333;font-size:18px;fill:#333333;" y="24">
<tspan>Fruit Consumption</tspan>
</text>
<text x="300" text-anchor="middle" class="highcharts-subtitle" style="color:#666666;fill:#666666;" y="45"></text>
<g class="highcharts-legend" transform="translate(232,259)">
<rect fill="none" class="highcharts-legend-box" rx="0" ry="0" x="0" y="0" width="134" height="26" visibility="visible"></rect>
<g>
<g>
<g class="highcharts-legend-item highcharts-bar-series highcharts-color-0 highcharts-series-0" transform="translate(8,3)">
<text x="21" style="color:#333333;font-size:12px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start" y="15">
<tspan>Jane</tspan>
</text>
<rect x="2" y="4" width="12" height="12" fill="#7cb5ec" rx="6" ry="6" class="highcharts-point"></rect>
</g>
<g class="highcharts-legend-item highcharts-bar-series highcharts-color-1 highcharts-series-1" transform="translate(76.390625,3)">
<text x="21" y="15" style="color:#333333;font-size:12px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start">
<tspan>John</tspan>
</text>
<rect x="2" y="4" width="12" height="12" fill="#434348" rx="6" ry="6" class="highcharts-point"></rect>
</g>
</g>
</g>
</g>
<g class="highcharts-axis-labels highcharts-xaxis-labels ">
<text x="55" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="77" opacity="1">
<tspan>Apples</tspan>
</text>
<text x="55" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="131" opacity="1">
<tspan>Bananas</tspan>
</text>
<text x="55" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="184" opacity="1">
<tspan>Oranges</tspan>
</text>
</g>
<g class="highcharts-axis-labels highcharts-yaxis-labels ">
<text x="70" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="225" opacity="1">0</text>
<text x="134.875" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="225" opacity="1">1</text>
<text x="199.75" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="225" opacity="1">2</text>
<text x="264.625" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="225" opacity="1">3</text>
<text x="329.5" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="225" opacity="1">4</text>
<text x="394.375" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="225" opacity="1">5</text>
<text x="459.25" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="225" opacity="1">6</text>
<text x="524.125" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="225" opacity="1">7</text>
<text x="585.5234375" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="225" opacity="1">8</text>
</g>
<text x="589" class="highcharts-credits" text-anchor="end" style="cursor:pointer;color:#999999;font-size:9px;fill:#999999;" y="295">Highcharts.com</text>
<g class="highcharts-label highcharts-tooltip highcharts-color-0" style="cursor:default;pointer-events:none;white-space:nowrap;" transform="translate(141,-9999)" opacity="0" visibility="visible">
<path fill="none" class="highcharts-label-box highcharts-tooltip-box" d="M 3.5 0.5 L 64.5 0.5 C 67.5 0.5 67.5 0.5 67.5 3.5 L 67.5 41.5 C 67.5 44.5 67.5 44.5 64.5 44.5 L 3.5 44.5 C 0.5 44.5 0.5 44.5 0.5 41.5 L 0.5 28 -5.5 22 0.5 16 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5"
isShadow="true" stroke="#000000" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path>
<path fill="none" class="highcharts-label-box highcharts-tooltip-box" d="M 3.5 0.5 L 64.5 0.5 C 67.5 0.5 67.5 0.5 67.5 3.5 L 67.5 41.5 C 67.5 44.5 67.5 44.5 64.5 44.5 L 3.5 44.5 C 0.5 44.5 0.5 44.5 0.5 41.5 L 0.5 28 -5.5 22 0.5 16 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5"
isShadow="true" stroke="#000000" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path>
<path fill="none" class="highcharts-label-box highcharts-tooltip-box" d="M 3.5 0.5 L 64.5 0.5 C 67.5 0.5 67.5 0.5 67.5 3.5 L 67.5 41.5 C 67.5 44.5 67.5 44.5 64.5 44.5 L 3.5 44.5 C 0.5 44.5 0.5 44.5 0.5 41.5 L 0.5 28 -5.5 22 0.5 16 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5"
isShadow="true" stroke="#000000" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path>
<path fill="rgba(247,247,247,0.85)" class="highcharts-label-box highcharts-tooltip-box" d="M 3.5 0.5 L 64.5 0.5 C 67.5 0.5 67.5 0.5 67.5 3.5 L 67.5 41.5 C 67.5 44.5 67.5 44.5 64.5 44.5 L 3.5 44.5 C 0.5 44.5 0.5 44.5 0.5 41.5 L 0.5 28 -5.5 22 0.5 16 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5"
stroke="#7cb5ec" stroke-width="1"></path>
<text x="8" style="font-size:12px;color:#333333;fill:#333333;" y="20">
<tspan style="font-size: 10px">Apples</tspan>
<tspan style="fill:#7cb5ec" x="8" dy="15">●</tspan>
<tspan dx="0"> Jane: </tspan>
<tspan style="font-weight:bold" dx="0">1</tspan>
</text>
</g>
</svg>
</div>
</div>
Waarom mist mijn code de fillkenmerk?
Ik gebruik vue.jsin mijn code. Dus, is dit de oorzaak?
Antwoord 1, Autoriteit 100%
U gebruikt versie van Highcharts die zijn gestyled door CSS, dus vul (en andere kenmerken) worden gedefinieerd door CSS-klassen.
Ik pakte je code aan Codepen en kreeg zwarte rechthoek. Toen pakte ik de inhoud van https://code.highcharts.com/css/highcharts.csssNaar CSS-sectie, en daar was het.
Dus wat u hoeft te doen is CSS-stijlen beschikbaar maken voor uw app.
Hoop dat dat helpt.